Particle components built with React and Tailwind CSS

Basic input component without label

Small input

Large input

Input with disabled state

Input type set to file

Input with label

Input with button

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

Input in a form

Form with zod validation

Section header

Brief description about the section

Section title

Section description

Frame example

Basic textarea

Small textarea

Large textarea

Disabled textarea

Message

Textarea labelled with Field

Bio

Write a short bio. Maximum 500 characters.

Field with textarea

Textarea in a form

Next.js

A basic select

Select framework

A select with small size

Select framework

A select with large size

Select framework

A disabled select

Select framework

Select popup not aligned to trigger

Select framework

Select items grouped with labels

JavaScript (+1 more)

Multiple selection with formatted value

Country

Select a country

This is an optional field

Field with select

Select in a form

Quantity

Choose a value between 1 and 100.

Field with number field

A number field

Small number field

Large number field

A disabled number field

Quantity

A number field with an external label

Quantity

A number field with a scrub area

A number field with min/max constraints

A number field with formatted value

Step 10

Step 0.1

A number field with step

A number in a form

Basic 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

Disabled autocomplete

Fruits

Select a item.

Field with autocomplete

Autocomplete form

Basic combobox

Disabled combobox

Small combobox

Large combobox

Fruits

Combobox with label

Combobox auto highlighting the first option

Combobox with grouped items

Combobox with clear button

Apple

Strawberry

Combobox with multiple selection

Fruits

Select a item.

Field with combobox

Fruits

Apple

Strawberry

Select multiple items.

Field with multiple selection combobox

Combobox with popup

Combobox form

Combobox multiple selection form

Default button

Outline button

Secondary button

Destructive button

Destructive outline button

Ghost button

Link button

Extra-small button

Small button

Large button

Extra-large button

Disabled button

Icon button

Small icon button

Large icon button

Button with icon

Link

Link rendered as button

Loading button

Group example

Group with input

Back link button with chevron

Card-style button with heading and description

Directional pad control buttons

Outline like button with count

Social login icon buttons

Expandable show more/less toggle button

Star button with count badge

Frame with collapsible content and delete button

Accept terms and conditions

Basic checkbox

Accept terms and conditions

Disabled checkbox

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

Checkbox with helper text

Enable notifications

You can enable or disable notifications at any time.

Card-style checkbox

Accept terms and conditions

Field with checkbox

Checkbox in a form

Next.jsViteAstro

Checkbox group

Next.jsViteAstro

Checkbox group with disabled item

FrameworksNext.jsViteAstro

Checkbox group select/deselect all checkboxes

Checkbox group parent with nested children controls

Frameworks

React Vue Svelte

Select one or more frameworks.

Field with checkbox group

Checkbox group in a form

Next.js Vite Astro

Basic radio group

Next.js Vite (disabled) Astro

Radio group with one option disabled

Free

Basic features for personal use.

Pro

Advanced tools for professionals.

Radio options with helper text

Receive notifications via email.

SMS

Receive notifications via text message.

Card-style radio options

Choose Plan

Free Pro Enterprise

Select the plan that fits your needs.

Field with radio group

Radio group in a form

Basic slider

Opacity50

Slider with label and value

Two-thumb range slider

Vertical slider

Country

This is an optional field

Field with slider

Slider in a form

Marketing emails

Basic switch

Marketing emails

Disabled switch

Marketing emails

By enabling marketing emails, you agree to receive emails.

Switch with description

Enable notifications

You can enable or disable notifications at any time.

Card-style switch

Email notifications

Field with toggle switch

Switch in a form

Complete form built with field

Billing Details

Company

The name that will appear on invoices.

Tax ID

Your business tax identification number.

Fieldset with legend and labeled fields

Heads up!