Styling Inputs and Widgets

Style text inputs, checkboxes, toggle buttons and range sliders.

Styling Text Inputs

Text inputs can be styled with a combination of CSS variables and selectors:

.ag-theme-alpine {
    --ag-borders-input: dashed 2px !important;
    --ag-input-border-color: red !important;
}

.ag-theme-alpine .ag-text-field-input {
    background-image: linear-gradient(to right, white, #fc8d62) !important;
}

.ag-theme-alpine .ag-text-field-input::placeholder {
    color: red !important;
    font-weight: bold;
}

The following example shows the result using the CSS style defined above. Note that the grid is editable, try to modify
a cell to see how the style is also applied. You can also see the result on the menu of the columns.

import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {"field": "athlete"},
    {"field": "age"},
    {"field": "country"},
    {"field": "year"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-inputs-text-inputs",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={'resizable': True, 'filter': True, "floatingFilter": True, 'editable': True},
            dashGridOptions={'suppressMenuHide': True},
            columnSize="sizeToFit",
        )
    ]
)

if __name__ == "__main__":
    app.run(debug=True)

The CSS variables relevant to styling text inputs are:

CSS Variable Description
<p>--ag-borders-input<p><p>CSS border style and sizer - like ‘solid 1px’ or ‘none’<p> <p>Draw borders around inputs. Set this to a border style and thickness, for example <code>solid 1px<code> to enable borders, or <code>none<code> to disable borders.<p>
<p>--ag-input-border-color<p><p>CSS color - like ‘red’ or ‘#fff’<p> <p>Color for borders around inputs, if enabled with <code>‑‑ag‑borders‑input<code>.<p>
<p>--ag-borders-input-invalid<p><p>CSS border style and sizer - like ‘solid 1px’ or ‘none’<p> <p>Draw borders around inputs when their content has failed validation. Set this to a border style and thickness, for example <code>solid 2px<code> to enable borders. Set to <code>none<code> to disable borders but ensure that you have added styles to differentiate invalid from valid inputs.<p>
<p>--ag-input-border-color-invalid<p><p>CSS color - like ‘red’ or ‘#fff’<p> <p>The color for the border around invalid inputs, if enabled with <code>‑‑ag‑borders‑input‑invalid<code>.<p>
<p>--ag-invalid-color<p><p>CSS color - like ‘red’ or ‘#fff’<p> The color applied to form elements in an invalid state.
<p>--ag-input-disabled-border-color<p><p>CSS color - like ‘red’ or ‘#fff’<p> The border around disabled text inputs.
<p><code>‑‑ag‑input‑disabled‑background‑color<code><p><p>CSS color - like ‘red’ or ‘#fff’<p> The background color of disabled text inputs.
<p>--ag-input-focus-box-shadow<p><p>CSS box-shadow value - like ‘0 5px 10px black’<p> The box shadow around focussed inputs.
<p>--ag-input-focus-border-color<p><p>CSS color - like ‘red’ or ‘#fff’<p> <p>Color of the border around focussed inputs. Set to <code>var(‑‑ag‑input‑border‑color)<code> if you do not want to change the border color on focus.<p>

Styling Checkboxes

The default styles of the grid disable the browser’s native checkbox widget and create a custom appearance using icon
fonts.

See the Custom Icons at Global Level documentation for
how to replace the checkbox icons - the icons used
are checkbox-checked, checkbox-unchecked, checkbox-indeterminate.

The colors can be controlled using the following CSS Variables:

.ag-theme-alpine {
    --ag-checkbox-background-color: rgb(209, 255, 123) !important;
    --ag-checkbox-checked-color: #66c2a5 !important;
    --ag-checkbox-unchecked-color: darkred !important;
    --ag-checkbox-indeterminate-color: #fc8d62 !important;
}

import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {
        "field": "athlete",
        "checkboxSelection": True,
        "headerCheckboxSelection": True,
    },
    {"field": "age", "sort": "desc"},
    {"field": "country", "sort": "asc"},
    {"field": "year"},
]

selectedRows = [
    {'athlete': 'Mark Todd', 'age': 56, 'country': 'New Zealand', 'year': 2012, 'date': '12/8/2012',
     'sport': 'Equestrian', 'gold': 0, 'silver': 0, 'bronze': 1, 'total': 1},
    {'athlete': 'Mac Cone', 'age': 55, 'country': 'Canada', 'year': 2008, 'date': '24/08/2008',
     'sport': 'Equestrian', 'gold': 0, 'silver': 1, 'bronze': 0, 'total': 1},
    {'athlete': 'Ian Millar', 'age': 61, 'country': 'Canada', 'year': 2008, 'date': '24/08/2008',
     'sport': 'Equestrian', 'gold': 0, 'silver': 1, 'bronze': 0, 'total': 1}
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-inputs-checkboxes",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={'resizable': True},
            selectedRows=selectedRows,
            dashGridOptions={"rowSelection": "multiple"},
            columnSize="sizeToFit",
        )
    ]
)

if __name__ == "__main__":
    app.run(debug=True)

Styling Radio Buttons

Radio Buttons, such as those in the chart settings UI, are specialised checkboxes. They respond to the same color
variables as demonstrated above. They use the radio-button-on and radio-button-off icons.

Styling Toggle Buttons

Toggle Buttons, such as the “Pivot Mode” toggle in the above example, are specialised checkboxes. They respond to the
same checkbox color variables. In addition, they expose a few more variables for advanced customisation:

CSS Variable Description
<p>--ag-toggle-button-border-width<p><p>CSS length - like ‘0’, ‘4px’ or ‘50%’<p> Size of the toggle button outer border.
<p>--ag-toggle-button-on-border-color<p><p>CSS color - like ‘red’ or ‘#fff’<p> Color of the toggle button outer border in its ‘on’ state.
<p>--ag-toggle-button-off-border-color<p><p>CSS color - like ‘red’ or ‘#fff’<p> Color of the toggle button’s outer border in its ‘off’ state.
<p>--ag-toggle-button-on-background-color<p><p>CSS color - like ‘red’ or ‘#fff’<p> Color of the toggle button background in its ‘on’ state.
<p>--ag-toggle-button-off-background-color<p><p>CSS color - like ‘red’ or ‘#fff’<p> Color of the toggle button background in its ‘off’ state.
<p><code>‑‑ag‑toggle‑button‑switch‑background‑color<code><p><p>CSS color - like ‘red’ or ‘#fff’<p> Color of the toggle button switch (the bit that slides from left to right).
<p>--ag-toggle-button-switch-border-color<p><p>CSS color - like ‘red’ or ‘#fff’<p> Border color of the toggle button switch (the bit that slides from left to right).
<p>--ag-toggle-button-width<p><p>CSS length - like ‘0’, ‘4px’ or ‘50%’<p> Width of the whole toggle button component.
<p>--ag-toggle-button-height<p><p>CSS length - like ‘0’, ‘4px’ or ‘50%’<p> Height of the whole toggle button component.

<br>