Input

Form related inputs

Import

import { Input } from '@windmill/react-ui'

Base

The default base input doesn't need any special prop, but all attributes that you would usually use in normal HTML are available here too. Note that if you're not using a Label component (not recommended), you should use an aria-label attribute to give screen readers a label.

live editor

Disabled

The disabled prop applies disabled styles to the input.

live editor

Valid

The valid prop applies valid styles to the input.

live editor

Invalid

Give a value of false to the valid prop to apply invalid styles to the input.

live editor

Helper text

See HelperText for more. Use HelperText to give more information about the related input.

live editor

Radio

Use radio as the value of type attribute to create a radio styled input. Note that you need to provide an onChange event handler for checked elements. If you don't, they will render a read-only field.

See Label for more on its usage with radios. *div used just for the example.

live editor

Checkbox

Use checkbox as the value of type attribute to create a checkbox styled input. Note that you need to provide an onChange event handler for checked elements. If you don't, they will render a read-only field.

See Label for more on its usage with checkboxes. *div used just for the example.

live editor

Props overview

PropDescriptionTypeDefault
typedefine the type of the input. See Textarea for textareas.stringtext
disabledapply disabled styles to the inputboolean
validapply valid or invalid styles to the inputboolean

Customizing

See Customization to learn how to change defaultTheme styles.