Advanced inputs

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

stable client:visible

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 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>
  );
}