Field

1"use client"
2 
3import { useState } from "react"
4import { REGEXP_ONLY_DIGITS } from "input-otp"
5 
6import {
7  Example,
8  ExampleWrapper,
9} from "@/registry/bases/radix/components/example"
10import { Badge } from "@/registry/bases/radix/ui/badge"
11import { Checkbox } from "@/registry/bases/radix/ui/checkbox"
12import {
13  Field,
14  FieldContent,
15  FieldDescription,
16  FieldGroup,
17  FieldLabel,
18  FieldLegend,
19  FieldSet,
20  FieldTitle,
21} from "@/registry/bases/radix/ui/field"
22import { Input } from "@/registry/bases/radix/ui/input"
23import {
24  InputOTP,
25  InputOTPGroup,
26  InputOTPSeparator,
27  InputOTPSlot,
28} from "@/registry/bases/radix/ui/input-otp"
29import {
30  NativeSelect,
31  NativeSelectOptGroup,
32  NativeSelectOption,
33} from "@/registry/bases/radix/ui/native-select"
34import {
35  RadioGroup,
36  RadioGroupItem,
37} from "@/registry/bases/radix/ui/radio-group"
38import {
39  Select,
40  SelectContent,
41  SelectItem,
42  SelectTrigger,
43  SelectValue,
44} from "@/registry/bases/radix/ui/select"
45import { Slider } from "@/registry/bases/radix/ui/slider"
46import { Switch } from "@/registry/bases/radix/ui/switch"
47import { Textarea } from "@/registry/bases/radix/ui/textarea"
48 
49export default function FieldExample() {
50  return (
51    <ExampleWrapper>
52      <InputFields />
53      <TextareaFields />
54      <SelectFields />
55      <CheckboxFields />
56      <RadioFields />
57      <SwitchFields />
58      <SliderFields />
59      <NativeSelectFields />
60      <InputOTPFields />
61    </ExampleWrapper>
62  )
63}
64 
65function InputFields() {
66  return (
67    <Example title="Input Fields">
68      <FieldGroup>
69        <Field>
70          <FieldLabel htmlFor="input-basic">Basic Input</FieldLabel>
71          <Input id="input-basic" placeholder="Enter text" />
72        </Field>
73        <Field>
74          <FieldLabel htmlFor="input-with-desc">
75            Input with Description
76          </FieldLabel>
77          <Input id="input-with-desc" placeholder="Enter your username" />
78          <FieldDescription>
79            Choose a unique username for your account.
80          </FieldDescription>
81        </Field>
82        <Field>
83          <FieldLabel htmlFor="input-desc-first">Email Address</FieldLabel>
84          <FieldDescription>
85            We&apos;ll never share your email with anyone.
86          </FieldDescription>
87          <Input
88            id="input-desc-first"
89            type="email"
90            placeholder="email@example.com"
91          />
92        </Field>
93        <Field>
94          <FieldLabel htmlFor="input-required">
95// … truncated