Skip to main content

Form controls

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

Example

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.

Result
Loading...
Live Editor

Sizing

Use size on <FormControl> to change the size of the input.

Result
Loading...
Live Editor

Disabled

Add the disabled prop on an input to give it a grayed out appearance and remove pointer events.

Result
Loading...
Live Editor

Readonly

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.

Result
Loading...
Live Editor

Readonly plain text

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.

Result
Loading...
Live Editor

File input

Result
Loading...
Live Editor

Color

Result
Loading...
Live Editor

API

FormControl