Form Components

Input fields, selects, checkboxes, toggles, sliders, and more — everything needed to build accessible, interactive forms.

Input

Single-line text fields with optional icons, hints, validation, and tooltips.

Basic Inputs

Password

With Hint & Validation

Username

Public display name.

Invalid email address.

With Tooltip

API Key

Sizes

Disabled

Prop	Type	Default	Description
`label`	`string`	-	Label displayed above the input field.
`placeholder`	`string`	-	Placeholder text shown when the input is empty.
`icon`	`FC`	-	Leading icon component rendered inside the input.
`hint`	`ReactNode`	-	Helper or validation text displayed below the input.
`tooltip`	`string`	-	Tooltip text shown next to the label on hover.
`size`	`"sm" \| "md"`	`"sm"`	Controls the height and text size of the input.
`isInvalid`	`boolean`	`false`	Displays the input in an error state with red border.
`isDisabled`	`boolean`	`false`	Disables the input and prevents interaction.
`type`	`string`	`"text"`	HTML input type attribute (text, password, email, number, etc.).
`shortcut`	`string \| boolean`	-	Keyboard shortcut indicator shown inside the input.

TextArea

Multi-line text input for longer-form content.

Examples

Description

BioMax 500 characters

Prop	Type	Default	Description
`label`	`string`	-	Label displayed above the textarea.
`placeholder`	`string`	-	Placeholder text shown when the textarea is empty.
`hint`	`ReactNode`	-	Helper text displayed below the textarea.
`tooltip`	`string`	-	Tooltip text shown next to the label.
`rows`	`number`	-	Number of visible text lines.
`cols`	`number`	-	Visible width of the textarea in average character widths.
`hideRequiredIndicator`	`boolean`	`false`	Hides the required asterisk even when field is required.

Select

Dropdown select built on React Aria with keyboard navigation and search.

Example

Country

Prop	Type	Default	Description
`label`	`string`	-	Label displayed above the select.
`placeholder`	`string`	-	Placeholder text when no option is selected.
`items`*	`SelectItemType[]`	-	Array of selectable items with id and label.
`size`	`"sm" \| "md"`	`"sm"`	Controls the height and text size of the select.
`hint`	`ReactNode`	-	Helper text displayed below the select.
`tooltip`	`string`	-	Tooltip text shown next to the label.
`children`*	`(item) => ReactNode`	-	Render function for each select item. Required.

MultiSelect

Tag-based multi-select with typeahead filtering.

Example

Select frameworks

React

Vue

Prop	Type	Default	Description
`label`	`string`	-	Label displayed above the multi-select.
`selectedItems`*	`useListData`	-	List data instance managing selected items (from react-stately useListData).
`items`*	`SelectItemType[]`	-	Array of all available selectable items.
`onItemInserted`	`(key: Key) => void`	-	Callback when an item is selected / added.
`onItemCleared`	`(key: Key) => void`	-	Callback when a selected item tag is removed.
`children`*	`(item) => ReactNode`	-	Render function for each dropdown item.

ComboBox

Searchable dropdown with typeahead filtering and supporting text.

Example

Search users

Prop	Type	Default	Description
`label`	`string`	-	Label displayed above the combobox.
`placeholder`	`string`	-	Placeholder text in the search input.
`items`*	`ComboBoxItemType[]`	-	Array of items with optional supportingText.
`children`*	`(item) => ReactNode`	-	Render function for each dropdown item.

NativeSelect

Browser-native select element for maximum compatibility.

Example

Country

InputGroup

Inputs with leading/trailing addons or a shared-box prefix.

With Prefix

Website

https://

With Addons

Price

USD

PaymentInput

Specialized input for credit card numbers with automatic formatting and card brand detection.

Example

Card number

Checkbox

Accessible checkbox built on React Aria with label and hint text.

Basic

Accept terms

Remember me

Disabled

With Hint

Marketing emails

Receive updates about new features.

Two-factor auth

Extra security layer.

Prop	Type	Default	Description
`label`	`string`	-	Label text displayed next to the checkbox.
`hint`	`string`	-	Helper text displayed below the label.
`size`	`"sm" \| "md"`	`"sm"`	Controls the size of the checkbox icon.
`isDisabled`	`boolean`	`false`	Disables the checkbox.
`defaultSelected`	`boolean`	-	Whether the checkbox is initially checked (uncontrolled).

Radio Buttons

Radio group for single-choice selection with label and hint per option.

Example

Free plan

Best for trying out

Pro plan

Best for professionals

Enterprise

Best for large teams

Toggle

Switch control built on React Aria with optional slim variant.

Basic

Dark mode

Notifications

Auto-save

Disabled

Slim

Compact mode

Show hints

Large slim

Prop	Type	Default	Description
`label`	`string`	-	Label text displayed next to the toggle.
`hint`	`string`	-	Helper text displayed below the label.
`size`	`"sm" \| "md"`	`"sm"`	Controls the size of the toggle switch.
`slim`	`boolean`	`false`	Renders a compact, slim variant of the toggle.
`isDisabled`	`boolean`	`false`	Disables the toggle.
`defaultSelected`	`boolean`	-	Initial checked state (uncontrolled).
`isSelected`	`boolean`	-	Controlled checked state.
`onChange`	`(isSelected: boolean) => void`	-	Callback fired when the toggle state changes.

ThemeToggle

Light / dark / system theme toggle with segmented button and switch variants.

Sizes

Switch Variant

With Label

Slider

Range slider with configurable label position and value formatting.

Controlled

50%

Floating Label

30%

Prop	Type	Default	Description
`value`	`number[]`	-	Controlled slider value.
`defaultValue`	`number[]`	-	Initial value (uncontrolled).
`onChange`	`(value: number \| number[]) => void`	-	Callback fired on value change. Receives number or number[].
`minValue`	`number`	`0`	Minimum allowed value.
`maxValue`	`number`	`100`	Maximum allowed value.
`labelPosition`	`"default" \| "bottom" \| "top-floating"`	`"default"`	Position of the value label relative to the thumb.
`labelFormatter`	`(value: number) => string`	-	Custom formatter for the displayed value label.

DatePicker

Calendar-based date selection with single date and date range variants.

Single Date

Date Range

PinInput

One-time-code and verification PIN input with auto-advance.

Basic

Enter verification code

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

4-digit code sent to your email

With Separator

Phone verification

FileUpload

Drop zone, file trigger, and progress list items for file uploads.

Drop Zone

or drag and drop

SVG, PNG, JPG or GIF (max. 800x400px)

File Trigger

File List Items

design-mockup.fig

1 MB

Complete

100%

presentation.pdf

4 MB

Uploading...

65%

failed-upload.png

1000 KB

Failed