Browse Particles

Basic input

Small input

Large input

Disabled input

File input

Input with label

Email *

Input with label and required indicator

EmailOptional

Input with optional label

Input with custom border and background

Read-only input

Pill-shaped input

Input with button using Group

14 characters left

Input with characters remaining counter

/

Input group with keyboard shortcut

Input group with start loading spinner

Input group with end loading spinner

Input group with search icon

0/14

Input group with character counter

https://

Input with start text and end tooltip

Password input with toggle visibility

https://

Input group mimicking a URL bar

Input group with start tooltip

Input group with clear button

Search input group with loader and voice button

Password

Enter a password. Must contain:

At least 8 characters - Requirement not met
At least 1 number - Requirement not met
At least 1 lowercase letter - Requirement not met
At least 1 uppercase letter - Requirement not met

Password input with strength indicator

Name

Visible on your profile

Field with description

Password *

Field with required indicator

This field is currently disabled.

Field in disabled state

Field showing validation error

{
  "state": {
    "badInput": false,
    "customError": false,
    "patternMismatch": false,
    "rangeOverflow": false,
    "rangeUnderflow": false,
    "stepMismatch": false,
    "tooLong": false,
    "tooShort": false,
    "typeMismatch": false,
    "valid": null,
    "valueMissing": false
  },
  "error": "",
  "errors": [],
  "value": null,
  "initialValue": null,
  "validity": {
    "badInput": false,
    "customError": false,
    "patternMismatch": false,
    "rangeOverflow": false,
    "rangeUnderflow": false,
    "stepMismatch": false,
    "tooLong": false,
    "tooShort": false,
    "typeMismatch": false,
    "valid": null,
    "valueMissing": false
  }
}

Show field validity state

Complete form built with field

Billing Details

Company

The name that will appear on invoices.

Tax ID

Your business tax identification number.

Fieldset with multiple fields

Input in a form

Group with input

Group with add button and input

USD

Group with input and currency text

Group with select and input

Group with input and select

Group with input and text button

Basic autocomplete

Disabled autocomplete

Small autocomplete

Large autocomplete

Fruits

Autocomplete with label

Autocomplete autofilling the input with the highlighted item

Autocomplete auto highlighting the first option

Autocomplete with clear button

Autocomplete with trigger and clear buttons

Autocomplete with grouped items

Autocomplete with limited number of results

Autocomplete with async items loading

Autocomplete form

Pill-shaped autocomplete

June 2026

Enter date

Calendar with date input

June 2026

Enter time

Calendar with time input

Date picker with input

Basic combobox

Disabled combobox

Small combobox

Large combobox

Fruits

Combobox with label

Combobox auto highlighting the first option

Combobox with clear button

Combobox with grouped items

Apple

Strawberry

Combobox with multiple selection

Combobox with input inside popup

Combobox form

Combobox multiple form

Combobox with start addon

Apple

Grape

Combobox multiple with start addon

Pill-shaped combobox

Timezone combobox

Timezone combobox with search input

Input group with field

Fruits

Select a item.

Field with autocomplete

Fruits

Select a item.

Field with combobox

Fruits

Apple

Strawberry

Select multiple items.

Field with multiple selection combobox

Quantity

Choose a value between 1 and 100.

Field with number field

Basic OTP field

Large OTP field

OTP field with separator

Verification code

Enter the 4-digit code sent to your email.

OTP field with label

Tier code

Digits 0-3 only.

OTP field with custom sanitization

Verification code

Enter `123456` to pass validation.

OTP field with auto validation

Recovery code

Accept letters and numbers for backup codes such as A7C9XZ.

Alphanumeric OTP field

Verification code

Placeholder hints stay visible until the focused slot is active.

OTP field with placeholder hints

Access code

Use mask to obscure the code on shared screens.

Masked OTP field

Basic number field

Small number field

Large number field

Disabled number field

Quantity

Number field with label

Quantity

Number field with scrub

Number field with range

Number field with formatted value

Step 10

Step 0.1

Number field with step

Number field in form

Pill-shaped number field

EmailOptional

Input with optional label

Input with custom border and background

Input with button using Group

14 characters left

Input with characters remaining counter

/

Input group with keyboard shortcut

Input group with start loading spinner

Input group with end loading spinner

Input group with search icon

0/14

Input group with character counter

https://

Input with start text and end tooltip

Password input with toggle visibility

https://

Input group mimicking a URL bar

Input group with start tooltip

Input group with clear button

Search input group with loader and voice button

Password

Enter a password. Must contain:

At least 8 characters - Requirement not met
At least 1 number - Requirement not met
At least 1 lowercase letter - Requirement not met
At least 1 uppercase letter - Requirement not met

Password input with strength indicator

Name

Visible on your profile

Field with description

Password *

Field with required indicator

This field is currently disabled.

Field in disabled state

Field showing validation error

{
  "state": {
    "badInput": false,
    "customError": false,
    "patternMismatch": false,
    "rangeOverflow": false,
    "rangeUnderflow": false,
    "stepMismatch": false,
    "tooLong": false,
    "tooShort": false,
    "typeMismatch": false,
    "valid": null,
    "valueMissing": false
  },
  "error": "",
  "errors": [],
  "value": null,
  "initialValue": null,
  "validity": {
    "badInput": false,
    "customError": false,
    "patternMismatch": false,
    "rangeOverflow": false,
    "rangeUnderflow": false,
    "stepMismatch": false,
    "tooLong": false,
    "tooShort": false,
    "typeMismatch": false,
    "valid": null,
    "valueMissing": false
  }
}

Show field validity state

Complete form built with field

Billing Details

Company

The name that will appear on invoices.

Tax ID

Your business tax identification number.

Fieldset with multiple fields

Input in a form

Group with add button and input

USD

Group with input and currency text

Group with select and input

Group with input and select

Group with input and text button

Email *

Input with label and required indicator

Input with label

Fruits

Autocomplete with label

Autocomplete with clear button

Autocomplete with trigger and clear buttons

Autocomplete with grouped items

Autocomplete with limited number of results

Autocomplete with async items loading

Autocomplete form

Pill-shaped autocomplete

June 2026

Enter date

Calendar with date input

June 2026

Enter time

Calendar with time input

Date picker with input

Autocomplete autofilling the input with the highlighted item

Autocomplete auto highlighting the first option

Disabled autocomplete

Combobox auto highlighting the first option

Combobox with clear button

Combobox with grouped items

Apple

Strawberry

Combobox with multiple selection

Combobox with input inside popup

Combobox form

Combobox multiple form

Combobox with start addon

Apple

Grape

Combobox multiple with start addon

Pill-shaped combobox

Timezone combobox with search input

Input group with field

Fruits

Select a item.

Field with autocomplete

Fruits

Select a item.

Field with combobox

Fruits

Apple

Strawberry

Select multiple items.

Field with multiple selection combobox

Quantity

Choose a value between 1 and 100.

Field with number field

Fruits

Combobox with label

Verification code

Enter the 4-digit code sent to your email.

OTP field with label

Tier code

Digits 0-3 only.

OTP field with custom sanitization

Recovery code

Accept letters and numbers for backup codes such as A7C9XZ.

Alphanumeric OTP field

Verification code

Placeholder hints stay visible until the focused slot is active.

OTP field with placeholder hints

Access code

Use mask to obscure the code on shared screens.

Masked OTP field

Disabled number field

Quantity

Number field with label

Quantity

Number field with scrub

Number field with range

Number field with formatted value

Step 10

Step 0.1

Number field with step

Number field in form

Pill-shaped number field

OTP field with separator

Verification code

Enter `123456` to pass validation.

OTP field with auto validation

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa