---
title: "Customising Inputs & Widgets"
framework: angular
version: "36.1.0"
---

# Customising Inputs & Widgets

Style text inputs, checkboxes and toggle buttons.

## Styling Text Inputs

The grid exposes many theme parameters beginning `input*` for customising text input appearance. For the full list, see the [Inputs section](https://www.ag-grid.com/angular-data-grid/theming-api/#reference-inputs) of the parameters reference.

```js
const myTheme = themeQuartz.withParams({
    inputBorder: { color: 'orange', style: 'dotted', width: 3 },
    inputBackgroundColor: 'rgb(255, 209, 123)',
    inputPlaceholderTextColor: 'rgb(155, 101, 1)',
    inputIconColor: 'purple',
    inputTextColor: 'black',
    // Cell Editors
    inputInvalidBackgroundColor: 'purple',
    inputInvalidBorder: 'darkred',
    inputInvalidTextColor: 'white'
});
```

If there is no parameter for the effect that you want to achieve, you can use CSS selectors:

```css
.ag-text-field-input {
    box-shadow: 0 0 10px orange;
}
```

#### Text Input Styling

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  Theme,
  enableDevValidations,
  themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [theme]="theme"
    [defaultColDef]="defaultColDef"
    [sideBar]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 170 },
    { field: "age", headerName: "Age (< 20)", cellEditorParams: { max: 20 } },
    { field: "country" },
    { field: "year" },
    { field: "date" },
    { field: "sport" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  theme: Theme | "legacy" = myTheme;
  defaultColDef: ColDef = {
    editable: true,
    filter: true,
    enableRowGroup: true,
    enablePivot: true,
    enableValue: true,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

const myTheme = themeQuartz.withParams({
  inputBorder: { color: "orange", style: "dotted", width: 3 },
  inputBackgroundColor: "rgb(255, 209, 123)",
  inputPlaceholderTextColor: "rgb(155, 101, 1)",
  inputIconColor: "purple",
  inputTextColor: "black",
  // Cell Editors
  inputInvalidBackgroundColor: "purple",
  inputInvalidBorder: "darkred",
  inputInvalidTextColor: "white",
});
```

[Live example: Text Input Styling](https://www.ag-grid.com/examples/theming-widgets/text-inputs/angular)

### Underlined Text Inputs

The default text input style is `inputStyleBordered`. The other provided input style is `inputStyleUnderlined` which produces a Material Design style underlined input. These are [theme parts](https://www.ag-grid.com/angular-data-grid/theming-parts/) so you can swap them using `theme.withPart()` or create your own:

```js
const myTheme = themeQuartz.withPart(inputStyleUnderlined);
```

#### Text Input Styling

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  Theme,
  enableDevValidations,
  inputStyleUnderlined,
  themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [theme]="theme"
    [defaultColDef]="defaultColDef"
    [sideBar]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 170 },
    { field: "age" },
    { field: "country" },
    { field: "year" },
    { field: "date" },
    { field: "sport" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  theme: Theme | "legacy" = myTheme;
  defaultColDef: ColDef = {
    editable: true,
    filter: true,
    enableRowGroup: true,
    enablePivot: true,
    enableValue: true,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

const myTheme = themeQuartz.withPart(inputStyleUnderlined);
```

[Live example: Text Input Styling](https://www.ag-grid.com/examples/theming-widgets/input-style-part/angular)

`inputStyleUnderlined` supports all the same theme parameters but only applies border parameters to the bottom border so use for example `inputBorder` and `inputFocusBorder` to style the underline in default and focus states.

### Creating Your Own Text Input Styles

If you'd like to create your own input styles from scratch you can remove the existing `inputStyle` part, see [Removing a Part](https://www.ag-grid.com/angular-data-grid/theming-parts/#removing-a-part).

## Styling Checkboxes

The grid exposes many theme parameters beginning `checkbox*` for customising checkbox appearance. For the full list, see the [Checkboxes & Radio Buttons section](https://www.ag-grid.com/angular-data-grid/theming-api/#reference-checkboxes) of the parameters reference.

```js
const myTheme = themeQuartz.withParams({
    checkboxUncheckedBackgroundColor: 'yellow',
    checkboxUncheckedBorderColor: 'darkred',
    checkboxCheckedBackgroundColor: 'red',
    checkboxCheckedBorderColor: 'darkred',
    checkboxCheckedShapeColor: 'yellow',
    checkboxCheckedShapeImage: {
        svg: '<svg>... svg source code...</svg>',
    },
    checkboxIndeterminateBorderColor: 'darkred',
});
```

If there is no parameter for the effect that you want to achieve, you can use CSS selectors:

```css
.ag-checkbox-input-wrapper {
    ... default styles ...
}
.ag-checkbox-input-wrapper.ag-checked {
    ... override default styles for 'checked' state ...
}
.ag-checkbox-input-wrapper.ag-indeterminate {
    ... override default styles for 'indeterminate' state ...
}
```

#### Checkbox Styling

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  Theme,
  enableDevValidations,
  themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [theme]="theme"
    [defaultColDef]="defaultColDef"
    [sideBar]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", hide: true },
    { field: "age", hide: true },
    { field: "country", hide: true },
    { field: "year" },
    { field: "date" },
    { field: "sport" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  theme: Theme | "legacy" = myTheme;
  defaultColDef: ColDef = {
    editable: true,
    filter: true,
    enableRowGroup: true,
    enablePivot: true,
    enableValue: true,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

const myTheme = themeQuartz.withParams({
  checkboxUncheckedBackgroundColor: "yellow",
  checkboxUncheckedBorderColor: "darkred",
  checkboxCheckedBackgroundColor: "red",
  checkboxCheckedBorderColor: "darkred",
  checkboxCheckedShapeColor: "yellow",
  checkboxCheckedShapeImage: {
    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
  },
  checkboxIndeterminateBorderColor: "darkred",
});
```

[Live example: Checkbox Styling](https://www.ag-grid.com/examples/theming-widgets/checkboxes/angular)

### Changing Checkbox Icons

The example above uses `checkboxCheckedShapeImage` to replace the default check mark with a X symbol. By default, `checkboxCheckedShapeImage` provides only the shape of the check mark, and the colour is replaced using the `checkboxCheckedShapeColor` parameter.

If you have SVG images containing their own colour, this example demonstrates how to create a checkbox style with coloured SVG images. It removes the existing checkbox styles using `theme.withoutPart()` and adds new styles with CSS:

#### Checkbox Styling

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import {
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  Theme,
  enableDevValidations,
  themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [theme]="theme"
    [defaultColDef]="defaultColDef"
    [sideBar]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", hide: true },
    { field: "age", hide: true },
    { field: "country", hide: true },
    { field: "year" },
    { field: "date" },
    { field: "sport" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  theme: Theme | "legacy" = myTheme;
  defaultColDef: ColDef = {
    editable: true,
    filter: true,
    enableRowGroup: true,
    enablePivot: true,
    enableValue: true,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

const myTheme = themeQuartz.withoutPart("checkboxStyle");
```

[Live example: Checkbox Styling](https://www.ag-grid.com/examples/theming-widgets/checkboxes-custom-svg/angular)

### Creating Your Own Checkbox Styles

If you'd like to create your own checkbox styles from scratch you can remove the existing `checkboxStyle` part, see [Removing a Part](https://www.ag-grid.com/angular-data-grid/theming-parts/#removing-a-part).

### Styling Radio Buttons

Radio Buttons, such as those in the chart settings UI, are specialised checkboxes. They have their corner radius overridden to be 100% to create a round shape, and get their checked shape from the `radioCheckedShapeImage` theme parameter.

## Styling Toggle Buttons

Toggle Buttons, such as the "Pivot Mode" toggle in the example below, are styled using theme parameters beginning `toggleButton*`.

```js
const myTheme = themeQuartz.withParams({
    toggleButtonWidth: 50,
    toggleButtonHeight: 30,
    toggleButtonSwitchInset: 10,
    toggleButtonOffBackgroundColor: 'darkred',
    toggleButtonOnBackgroundColor: 'darkgreen',
    toggleButtonSwitchBackgroundColor: 'yellow',
});
```

#### Toggle Button Styling

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  Theme,
  enableDevValidations,
  themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [theme]="theme"
    [defaultColDef]="defaultColDef"
    [sideBar]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 170 },
    { field: "age" },
    { field: "country", rowGroup: true },
    { field: "year" },
    { field: "date" },
    { field: "sport", pivot: true },
    { field: "gold", aggFunc: "sum" },
    { field: "silver", aggFunc: "sum" },
    { field: "bronze", aggFunc: "sum" },
    { field: "total", aggFunc: "sum" },
  ];
  theme: Theme | "legacy" = myTheme;
  defaultColDef: ColDef = {
    editable: true,
    filter: true,
    enableRowGroup: true,
    enablePivot: true,
    enableValue: true,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

const myTheme = themeQuartz.withParams({
  toggleButtonWidth: 50,
  toggleButtonHeight: 30,
  toggleButtonSwitchInset: 10,
  toggleButtonOffBackgroundColor: "darkred",
  toggleButtonOnBackgroundColor: "darkgreen",
  toggleButtonSwitchBackgroundColor: "yellow",
});
```

[Live example: Toggle Button Styling](https://www.ag-grid.com/examples/theming-widgets/toggle-buttons/angular)

If there is no parameter that achieves the effect you want, you can use CSS selectors:

```css
.ag-toggle-button-input-wrapper {
    ... background styles ...
}
.ag-toggle-button-input-wrapper.ag-checked {
    ... override background styles for 'checked' state ...
}
.ag-toggle-button-input-wrapper::before {
    ... sliding switch styles ...
}
.ag-toggle-button-input-wrapper.ag-checked::before {
    ... override sliding switch styles for 'checked' state ...
}
```

#### Toggle Button Styling with CSS

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import {
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  Theme,
  enableDevValidations,
  themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [theme]="theme"
    [defaultColDef]="defaultColDef"
    [sideBar]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 170 },
    { field: "age" },
    { field: "country", rowGroup: true },
    { field: "year" },
    { field: "date" },
    { field: "sport", pivot: true },
    { field: "gold", aggFunc: "sum" },
    { field: "silver", aggFunc: "sum" },
    { field: "bronze", aggFunc: "sum" },
    { field: "total", aggFunc: "sum" },
  ];
  theme: Theme | "legacy" = myTheme;
  defaultColDef: ColDef = {
    editable: true,
    filter: true,
    enableRowGroup: true,
    enablePivot: true,
    enableValue: true,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

const myTheme = themeQuartz.withParams({
  toggleButtonWidth: 50,
  toggleButtonHeight: 26,
  toggleButtonOffBackgroundColor: "darkred",
  toggleButtonOnBackgroundColor: "darkgreen",
});
```

[Live example: Toggle Button Styling with CSS](https://www.ag-grid.com/examples/theming-widgets/toggle-buttons-css/angular)