Field

A controlled form field component.

Props#

InputField#

Prop	Type	Default	Description
errorBorderColor	`string`		The border color when the input is invalid. Use color keys in `theme.colors`
focusBorderColor	`string`		The border color when the input is focused. Use color keys in `theme.colors`
htmlSize	`number`		The native HTML `size` attribute to be passed to the `input`
isDisabled	`boolean`	`false`	If `true`, the form control will be disabled. This has 2 side effects: - The `FormLabel` will have `data-disabled` attribute - The form element (e.g, Input) will be disabled
isInvalid	`boolean`	`false`	If `true`, the form control will be invalid. This has 2 side effects: - The `FormLabel` and `FormErrorIcon` will have `data-invalid` set to `true` - The form element (e.g, Input) will have `aria-invalid` set to `true`
isReadOnly	`boolean`	`false`	If `true`, the form control will be readonly
isRequired	`boolean`	`false`	If `true`, the form control will be required. This has 2 side effects: - The `FormLabel` will show a required indicator - The form element (e.g, Input) will have `aria-required` set to `true`
leftAddon	`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| PromiseLikeOfReactNode`
rightAddon	`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| PromiseLikeOfReactNode`
type	`string`

NumberInputField#

Prop	Type	Default	Description
type`required`	`"number"`
allowMouseWheel	`boolean`		If `true`, the input's value will change based on mouse wheel
aria-describedby	`string`
aria-label	`string`
aria-labelledby	`string`
clampValueOnBlur	`boolean`	`true`	This controls the value update when you blur out of the input. - If `true` and the value is greater than `max`, the value will be reset to `max` - Else, the value remains the same.
decrementIcon	`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| PromiseLikeOfReactNode`		Render a custom decrement icon.
defaultValue	`string \| number`		The initial value of the counter. Should be less than `max` and greater than `min`
errorBorderColor	`string`		The border color when the input is invalid. Use color keys in `theme.colors`
fieldProps	`NumberInputFieldProps`		Props to pass to the NumberInputField component.
focusBorderColor	`string`		The border color when the input is focused. Use color keys in `theme.colors`
focusInputOnChange	`boolean`	`true`	If `true`, the input will be focused as you increment or decrement the value with the stepper
format	`(value: string \| number) => string \| number`		If using a custom display format, this converts the default format to the custom format.
getAriaValueText	`(value: string \| number) => string`		This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input
hideStepper	`boolean`		Hide the stepper.
id	`string`		The `id` to use for the number input field.
incrementIcon	`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| PromiseLikeOfReactNode`		Render a custom increment icon.
inputMode	`type ONLY_FOR_FORMAT = \| "search" \| "text" \| "email" \| "tel" \| "none" \| "url" \| "numeric" \| "decimal"`	`decimal`	Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices
isDisabled	`boolean`		Whether the input should be disabled
isInvalid	`boolean`		If `true`, the input will have `aria-invalid` set to `true`
isReadOnly	`boolean`		If `true`, the input will be in readonly mode
isRequired	`boolean`		Whether the input is required
isValidCharacter	`(value: string) => boolean`		Whether the pressed key should be allowed in the input. The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\-.]$/
keepWithinRange	`boolean`	`true`	This controls the value update behavior in general. - If `true` and you use the stepper or up/down arrow keys, the value will not exceed the `max` or go lower than `min` - If `false`, the value will be allowed to go out of range.
max	`number`	`Number.MAX_SAFE_INTEGER`	The maximum value of the counter
min	`number`	`Number.MIN_SAFE_INTEGER`	The minimum value of the counter
name	`string`		The HTML `name` attribute used for forms
onBlur	`FocusEventHandler<HTMLInputElement>`
onChange	`(valueAsString: string, valueAsNumber: number) => void`		The callback fired when the value changes
onFocus	`FocusEventHandler<HTMLInputElement>`
onInvalid	`( message: ValidityState, value: string, valueAsNumber: number, ) => void`
parse	`(value: string) => string`		If using a custom display format, this converts the custom format to a format `parseFloat` understands.
pattern	`string`	`[0-9]*(.[0-9]+)?`	The pattern used to check the <input> element's value against on form submission.
placeholder	`string`		The placeholder text when no value is selected.
precision	`number`		The number of decimal points used to round the value
step	`number`	`1`	The step used to increment or decrement the value
value	`string \| number`		The value of the counter. Should be less than `max` and greater than `min`

PasswordInputField#

TextareaField#

Prop	Type	Default	Description
errorBorderColor	`string`		The border color when the textarea is invalid. Use color keys in `theme.colors`
focusBorderColor	`string`		The border color when the textarea is focused. Use color keys in `theme.colors`
isDisabled	`boolean`	`false`	If `true`, the form control will be disabled. This has 2 side effects: - The `FormLabel` will have `data-disabled` attribute - The form element (e.g, Input) will be disabled
isInvalid	`boolean`	`false`	If `true`, the form control will be invalid. This has 2 side effects: - The `FormLabel` and `FormErrorIcon` will have `data-invalid` set to `true` - The form element (e.g, Input) will have `aria-invalid` set to `true`
isReadOnly	`boolean`	`false`	If `true`, the form control will be readonly
isRequired	`boolean`	`false`	If `true`, the form control will be required. This has 2 side effects: - The `FormLabel` will show a required indicator - The form element (e.g, Input) will have `aria-required` set to `true`

SwitchField#

Prop	Type	Default	Description
aria-describedby	`string`
aria-invalid	`true`
aria-label	`string`		Defines the string that labels the checkbox element.
aria-labelledby	`string`		Refers to the `id` of the element that labels the checkbox element.
defaultChecked	`boolean`	`false`	If `true`, the checkbox will be initially checked.
id	`string`		id assigned to input
isChecked	`boolean`	`false`	If `true`, the checkbox will be checked. You'll need to pass `onChange` to update its value (since it is now controlled)
isDisabled	`boolean`	`false`	If `true`, the checkbox will be disabled
isFocusable	`boolean`	`false`	If `true` and `isDisabled` is passed, the checkbox will remain tabbable but not interactive
isInvalid	`boolean`	`false`	If `true`, the checkbox is marked as invalid. Changes style of unchecked state.
isReadOnly	`boolean`	`false`	If `true`, the checkbox will be readonly
isRequired	`boolean`	`false`	If `true`, the checkbox input is marked as required, and `required` attribute will be added
name	`string`		The name of the input field in a checkbox (Useful for form submission).
onBlur	`(event: FocusEvent<HTMLInputElement, Element>) => void`		The callback invoked when the checkbox is blurred (loses focus)
onChange	`(event: ChangeEvent<HTMLInputElement>) => void`		The callback invoked when the checked state of the `Checkbox` changes.
onFocus	`(event: FocusEvent<HTMLInputElement, Element>) => void`		The callback invoked when the checkbox is focused
spacing	`ResponsiveValue<number \| "px" \| (string & {}) \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "auto" \| "1" \| "-1" \| "2" \| "-2" \| "3" \| "-3" \| "4" \| "-4" \| "5" \| "-5" \| ... 54 more ... \| "-3.5">`	`0.5rem`	The spacing between the switch and its label text
tabIndex	`number`		The tab-index property of the underlying input element.
value	`string \| number`		The value to be used in the checkbox input. This is the value that will be returned on form submission.

SelectField#

Prop	Type	Default	Description
name`required`	`string`		The name of the input field in a native form.
arrowPadding	`number`	`8`	The padding required to prevent the arrow from reaching the very edge of the popper.
autoSelect	`boolean`	`true`	If `true`, the first enabled menu item will receive focus and be selected when the menu opens.
boundary	`HTMLElement \| "clippingParents" \| "scrollParent"`	`clippingParents`	The boundary area for the popper. Used within the `preventOverflow` modifier
buttonProps	`SelectButtonProps`
closeOnBlur	`boolean`	`true`	If `true`, the menu will close when you click outside the menu list
closeOnSelect	`boolean`	`true`	If `true`, the menu will close when a menu item is clicked
computePositionOnMount	`boolean`
defaultIsOpen	`boolean`
defaultValue	`string \| string[]`		The initial value of the select field.
direction	`"ltr" \| "rtl"`		If `rtl`, proper placement positions will be flipped i.e. 'top-right' will become 'top-left' and vice-verse
eventListeners	`type ONLY_FOR_FORMAT = \| boolean \| { scroll?: boolean \| undefined resize?: boolean \| undefined }`	`true`	If provided, determines whether the popper will reposition itself on `scroll` and `resize` of the window.
flip	`boolean`	`true`	If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
gutter	`number`	`8`	The distance or margin between the reference and popper. It is used internally to create an `offset` modifier. NB: If you define `offset` prop, it'll override the gutter.
id	`string`
initialFocusRef	`RefObject<{ focus(): void }>`		The `ref` of the element that should receive focus when the popover opens.
isDisabled	`boolean`		If `true`, the select will be disabled.
isLazy	`boolean`	`false`	Performance 🚀: If `true`, the MenuItem rendering will be deferred until the menu is open.
isOpen	`boolean`
lazyBehavior	`LazyMode`	`unmount`	Performance 🚀: The lazy behavior of menu's content when not visible. Only works when `isLazy={true}` - "unmount": The menu's content is always unmounted when not open. - "keepMounted": The menu's content initially unmounted, but stays mounted when menu is open.
listProps	`SelectListProps`
matchWidth	`boolean`	`false`	If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
modifiers	`Partial<Modifier<string, any>>[]`		Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
multiple	`boolean`		Enable multiple select.
offset	`[number, number]`		The main and cross-axis offset to displace popper element from its reference element.
onChange	`(value: string \| string[]) => void`		The callback invoked when the value of the select field changes.
onClose	`() => void`
onOpen	`() => void`
options	`FieldOptions<SelectOption>`		An array of options If you leave this empty the children prop will be rendered.
placeholder	`string`		The placeholder text when there's no value.
placement	`PlacementWithLogical`	`bottom`	The placement of the popper relative to its reference.
preventOverflow	`boolean`	`true`	If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
renderValue	`(value: string \| string[]) => ReactNode`		The function used to render the value of the select field.
strategy	`"fixed" \| "absolute"`	`absolute`	The CSS positioning strategy to use.
value	`string \| string[]`		The value of the select field.

CheckboxField#

Prop	Type	Default	Description
aria-describedby	`string`
aria-invalid	`true`
aria-label	`string`		Defines the string that labels the checkbox element.
aria-labelledby	`string`		Refers to the `id` of the element that labels the checkbox element.
icon	`ReactElement<any, string \| JSXElementConstructor<any>>`	`CheckboxIcon`	The checked icon to use
iconColor	`string`		The color of the checkbox icon when checked or indeterminate
iconSize	`string \| number`		The size of the checkbox icon when checked or indeterminate
id	`string`		id assigned to input
inputProps	`InputHTMLAttributes<HTMLInputElement>`		Additional props to be forwarded to the `input` element
isChecked	`boolean`	`false`	If `true`, the checkbox will be checked. You'll need to pass `onChange` to update its value (since it is now controlled)
isDisabled	`boolean`	`false`	If `true`, the checkbox will be disabled
isFocusable	`boolean`	`false`	If `true` and `isDisabled` is passed, the checkbox will remain tabbable but not interactive
isIndeterminate	`boolean`	`false`	If `true`, the checkbox will be indeterminate. This only affects the icon shown inside checkbox and does not modify the isChecked property.
isInvalid	`boolean`	`false`	If `true`, the checkbox is marked as invalid. Changes style of unchecked state.
isReadOnly	`boolean`	`false`	If `true`, the checkbox will be readonly
isRequired	`boolean`	`false`	If `true`, the checkbox input is marked as required, and `required` attribute will be added
name	`string`		The name of the input field in a checkbox (Useful for form submission).
onChange	`(event: ChangeEvent<HTMLInputElement>) => void`		The callback invoked when the checked state of the `Checkbox` changes.
onFocus	`(event: FocusEvent<HTMLInputElement, Element>) => void`		The callback invoked when the checkbox is focused
spacing	`ResponsiveValue<number \| "px" \| (string & {}) \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "auto" \| "1" \| "-1" \| "2" \| "-2" \| "3" \| "-3" \| "4" \| "-4" \| "5" \| "-5" \| ... 54 more ... \| "-3.5">`	`0.5rem`	The spacing between the checkbox and its label text
tabIndex	`number`		The tab-index property of the underlying input element.
value	`string \| number`		The value to be used in the checkbox input. This is the value that will be returned on form submission.

RadioField#

Prop	Type	Default	Description
options`required`	`RadioOptions`
defaultValue	`string`		The value of the radio to be `checked` initially (in uncontrolled mode)
direction	`StackDirection`
isDisabled	`boolean`	`false`	If `true`, all wrapped radio inputs will be disabled
isFocusable	`boolean`	`false`	If `true` and `isDisabled` is true, all wrapped radio inputs will remain focusable but not interactive.
isNative	`boolean`	`false`	If `true`, input elements will receive `checked` attribute instead of `isChecked`. This assumes, you're using native radio inputs
name	`string`		The `name` attribute forwarded to each `radio` element
onChange	`(nextValue: string) => void`		Function called once a radio is checked
spacing	`ResponsiveValue<number \| "px" \| (string & {}) \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "auto" \| "1" \| "-1" \| "2" \| "-2" \| "3" \| "-3" \| "4" \| "-4" \| "5" \| "-5" \| ... 54 more ... \| "-3.5">`
value	`string`		The value of the radio to be `checked` (in controlled mode)

PinField#

Prop	Type	Default	Description
autoFocus	`boolean`		If `true`, the pin input receives focus on mount
defaultValue	`string`		The default value of the pin input
id	`string`		The top-level id string that will be applied to the input fields. The index of the input will be appended to this top-level id.
isDisabled	`boolean`		If `true`, the pin input component is put in the disabled state
isInvalid	`boolean`		If `true`, the pin input component is put in the invalid state
manageFocus	`boolean`	`true`	If `true`, focus will move automatically to the next input once filled
mask	`boolean`		If `true`, the input's value will be masked just like `type=password`
onChange	`(value: string) => void`		Function called on input change
onComplete	`(value: string) => void`		Function called when all inputs have valid values
otp	`boolean`		If `true`, the pin input component signals to its fields that they should use `autocomplete="one-time-code"`.
pinLength	`number`
pinType	`"number" \| "alphanumeric"`
placeholder	`string`		The placeholder for the pin input
spacing	`ResponsiveValue<number \| "px" \| (string & {}) \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "auto" \| "1" \| "-1" \| "2" \| "-2" \| "3" \| "-3" \| "4" \| "-4" \| "5" \| "-5" \| ... 54 more ... \| "-3.5">`
value	`string`		The value of the pin input. This is the value that will be returned when the pin input is filled

NativeSelectField#

Prop	Type	Default	Description
errorBorderColor	`string`		The border color when the select is invalid. Use color keys in `theme.colors`
focusBorderColor	`string`		The border color when the select is focused. Use color keys in `theme.colors`
icon	`ReactElement<any, string \| JSXElementConstructor<any>>`		The icon element to use in the select
iconColor	`string`		The color of the icon
iconSize	`string`		The size (width and height) of the icon
isDisabled	`boolean`	`false`
isInvalid	`boolean`	`false`	If `true`, the form control will be invalid. This has 2 side effects: - The `FormLabel` and `FormErrorIcon` will have `data-invalid` set to `true` - The form element (e.g, Input) will have `aria-invalid` set to `true`
isReadOnly	`boolean`	`false`	If `true`, the form control will be readonly
isRequired	`boolean`	`false`	If `true`, the form control will be required. This has 2 side effects: - The `FormLabel` will show a required indicator - The form element (e.g, Input) will have `aria-required` set to `true`
options	`Option[]`
placeholder	`string`		The placeholder for the select. We render an `<option/>` element that has empty value. ```jsx <option value="">{placeholder}</option> ```
rootProps	`RootProps`		Props to forward to the root `div` element

Was this helpful?