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