Field
A label, a control, a hint and whatever error the form has for it.
import { Field, TextInput } from '@textui/core';
<Field name="email" label="Email" hint="We only use this for alerts" required>
<TextInput value="" onChange={() => {}} />
</Field>
Props
| Prop | Type | Default | |
| — | — | — | — |
| name | string | required | |
| label | string | | |
| hint | string | | |
| required | boolean | | |
| labelWidth | number | | Cells reserved for the label, so a column of fields lines up. |
| stacked | boolean | | Label above the control rather than beside it. |
Plus everything on BoxProps.
name is how it finds its error in the surrounding Form, so it
must match the key in initialValues. Outside a form a field is just a
labelled row, which is fine.
labelWidth aligns labels across fields that are not siblings. stacked
puts the label above the control instead of beside it, which is what a narrow
terminal wants.