Skip to main content

TextField

The TextField component is a versatile input field component that supports various types of input, validation, and customization.

Python Dash Example​

Below is an example of how to use the TextField component in a Python Dash application.

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.TextField(
        id="example-textfield",
        label="Example Label",
        variant="outlined",
        fullWidth=True,
        margin="normal"
      )
    ])
  ]
)

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

Props Table​

Below are the updated props for the TextField component:

| Prop | Type | Default | Description | | --------- | ---------- | ----------- | ---------------------------------------------------------------- | ---------- | ----------------------------------------------- | | id | string | None | Unique identifier for the text field. | | label | string | None | Label for the text field. | | variant | 'standard' | 'outlined' | 'filled' | 'standard' | The variant to use. | | fullWidth | boolean | false | If true, the input will take up the full width of its container. | | margin | 'none' | 'dense' | 'normal' | 'none' | Adjusts the vertical spacing of the text field. |

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI TextField Documentation