Input

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