www/docs/forms/form-control.mdx
import FormTextControls from '!!raw-loader!../examples/Form/TextControls'; import FormInputSizes from '!!raw-loader!../examples/Form/InputSizes'; import FormControlDisabled from '!!raw-loader!../examples/Form/FormControlDisabled'; import InputReadOnly from '!!raw-loader!../examples/Form/InputReadOnly'; import Plaintext from '!!raw-loader!../examples/Form/Plaintext'; import FormFile from '!!raw-loader!../examples/Form/FormFile'; import ColorPicker from '!!raw-loader!../examples/Form/ColorPicker';
For textual form controls—like inputs and textareas—use the FormControl component.
FormControl adds some additional styles for general appearance, focus
state, sizing, and more.
Use size on <FormControl> to change the size of the input.
Add the disabled prop on an input to give it a grayed out appearance and remove pointer events.
Add the readOnly prop on an input to prevent modification
of the input's value. Read-only inputs appear lighter (just like
disabled inputs), but retain the standard cursor.
If you want to have readonly elements in your form styled as plain text,
use the plaintext prop on FormControls to remove the
default form field styling and preserve the correct margin and padding.