field-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field-example",
  "title": "Field",
  "registryDependencies": [
    "badge",
    "checkbox",
    "field",
    "input",
    "input-otp",
    "native-select",
    "radio-group",
    "select",
    "slider",
    "switch",
    "textarea",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-maia/examples/field-example.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}