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