Input

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/base-vega/components/example"
5import { Button } from "@/registry/base-vega/ui/button"
6import {
7  Field,
8  FieldDescription,
9  FieldGroup,
10  FieldLabel,
11} from "@/registry/base-vega/ui/field"
12import { Input } from "@/registry/base-vega/ui/input"
13import {
14  NativeSelect,
15  NativeSelectOption,
16} from "@/registry/base-vega/ui/native-select"
17import {
18  Select,
19  SelectContent,
20  SelectGroup,
21  SelectItem,
22  SelectTrigger,
23  SelectValue,
24} from "@/registry/base-vega/ui/select"
25 
26export default function InputExample() {
27  return (
28    <ExampleWrapper>
29      <InputBasic />
30      <InputInvalid />
31      <InputWithLabel />
32      <InputWithDescription />
33      <InputDisabled />
34      <InputTypes />
35      <InputWithSelect />
36      <InputWithButton />
37      <InputWithNativeSelect />
38      <InputForm />
39    </ExampleWrapper>
40  )
41}
42 
43function InputBasic() {
44  return (
45    <Example title="Basic">
46      <Input type="email" placeholder="Email" />
47    </Example>
48  )
49}
50 
51function InputInvalid() {
52  return (
53    <Example title="Invalid">
54      <Input type="text" placeholder="Error" aria-invalid="true" />
55    </Example>
56  )
57}
58 
59function InputWithLabel() {
60  return (
61    <Example title="With Label">
62      <Field>
63        <FieldLabel htmlFor="input-demo-email">Email</FieldLabel>
64        <Input
65          id="input-demo-email"
66          type="email"
67          placeholder="name@example.com"
68        />
69      </Field>
70    </Example>
71  )
72}
73 
74function InputWithDescription() {
75  return (
76    <Example title="With Description">
77      <Field>
78        <FieldLabel htmlFor="input-demo-username">Username</FieldLabel>
79        <Input
80          id="input-demo-username"
81          type="text"
82          placeholder="Enter your username"
83        />
84        <FieldDescription>
85          Choose a unique username for your account.
86        </FieldDescription>
87      </Field>
88    </Example>
89  )
90}
91 
92function InputDisabled() {
93  return (
94    <Example title="Disabled">
95      <Field>
96        <FieldLabel htmlFor="input-demo-disabled">Email</FieldLabel>
97        <Input
98          id="input-demo-disabled"
99          type="email"
100          placeholder="Email"
101          disabled
102        />
103      </Field>
104    </Example>
105  )
106}
107 
108function InputTypes() {
109  return (
110    <Example title="Input Types">
111      <div className="flex w-full flex-col gap-6">
112        <Field>
113          <FieldLabel htmlFor="input-demo-password">Password</FieldLabel>
114          <Input
115// … truncated