Advanced inputs

Toggle, Toggle group, Number field, Toolbar, Sheet, Rating, Tag input, Input OTP.

stable

Source: src/components/ui/

Rendered example — light + dark

Light

Toggle

Toggle group

Toolbar

Number field

Rating

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source file src/components/ui/ for the full API.

import { NumberField } from '@/components/ui/number-field';
import { Rating } from '@/components/ui/rating';
import { TagInput } from '@/components/ui/tag-input';

export function ReviewForm() {
  return (
    <div className="space-y-4">
      <NumberField defaultValue={1} min={1} max={99} aria-label="Quantity" />
      <Rating defaultValue={4} aria-label="Stars" />
      <TagInput defaultValue={['astro', 'react']} placeholder="Add tag…" />
    </div>
  );
}

Props API

ButtonProps

Prop	Type	Default	Description
`asChild` opt	`boolean`	`false`	—

CalloutProps

Prop	Type	Default	Description
`title`	`string`	—	—
`variant` opt	`'default' \| 'success' \| 'warning' \| 'error'`	`'default'`	—
`icon` opt	`React.ReactNode`	—	Optional icon node (e.g. a Lucide icon element) shown beside the title.

DataTableProps

Prop	Type	Default	Description
`columns`	`ColumnDef<TData, TValue>[]`	—	—
`data`	`TData[]`	—	—
`initialColumnVisibility` opt	`VisibilityState`	`{}`	Initial column visibility — column id to visible boolean.
`initialGlobalFilter` opt	`string`	`''`	Initial global filter string.
`height` opt	`string \| number`	`'500px'`	Height of the scroll container in CSS units. Defaults to '500px'.
`estimateRowSize` opt	`number`	`40`	Estimated row height in px for virtualization. Defaults to 40.
`syncToUrl` opt	`boolean \| { key: string }`	`false`	Sync filter/sort/visibility/sizing to URLSearchParams so views are shareable and survive page refresh. Pass `{ key: 'myTable' }` to namespace URL params when multiple DataTables share a page. Defaults to false (no URL syncing).

DividerProps

Prop	Type	Default	Description
`children` opt	`React.ReactNode`	—	Optional centered text label rendered between two rules.

MetricProps

Prop	Type	Default	Description
`value`	`string \| number`	—	—
`label` opt	`string`	—	—
`delta` opt	`{ value: number; /** Semantic trend direction. Controls col…`	—	—

ProgressBarProps

Prop	Type	Default	Description
`value`	`number`	—	Completion percentage, clamped to [0, 100].
`label` opt	`string`	—	Accessible name for screen readers.

TrackerProps

Prop	Type	Default	Description
`data`	`TrackerBlock[]`	—	—