Inputstandard
한 줄 글자 입력(input)입니다. shadcn base-nova 의 `input` 은 Base UI 의 `Input` 을 감쌉니다. 여러 줄은 `textarea`, 앞뒤에 아이콘·버튼을 붙이려면 `input-group` 을 씁니다.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/inputDefault
input-example.tsx
import { Example, ExampleWrapper,} from "@/components/example"import { Button } from "@/components/ui/button"import { Field, FieldDescription, FieldGroup, FieldLabel,} from "@/components/ui/field"import { Input } from "@/components/ui/input"import { NativeSelect, NativeSelectOption,} from "@/components/ui/native-select"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"
export default function InputExample() { return ( <ExampleWrapper> <InputBasic /> <InputInvalid /> <InputWithLabel /> <InputWithDescription /> <InputDisabled /> <InputTypes /> <InputWithSelect /> <InputWithButton /> <InputWithNativeSelect /> <InputForm /> </ExampleWrapper> )}
function InputBasic() { return ( <Example title="Basic"> <Input type="email" placeholder="Email" /> </Example> )}
function InputInvalid() { return ( <Example title="Invalid"> <Input type="text" placeholder="Error" aria-invalid="true" /> </Example> )}
function InputWithLabel() { return ( <Example title="With Label"> <Field> <FieldLabel htmlFor="input-demo-email">Email</FieldLabel> <Input id="input-demo-email" type="email" placeholder="name@example.com" /> </Field> </Example> )}
function InputWithDescription() { return ( <Example title="With Description"> <Field> <FieldLabel htmlFor="input-demo-username">Username</FieldLabel> <Input id="input-demo-username" type="text" placeholder="Enter your username" /> <FieldDescription> Choose a unique username for your account. </FieldDescription> </Field> </Example> )}
function InputDisabled() { return ( <Example title="Disabled"> <Field> <FieldLabel htmlFor="input-demo-disabled">Email</FieldLabel> <Input id="input-demo-disabled" type="email" placeholder="Email" disabled /> </Field> </Example> )}
function InputTypes() { return ( <Example title="Input Types"> <div className="flex w-full flex-col gap-6"> <Field> <FieldLabel htmlFor="input-demo-password">Password</FieldLabel> <Input id="input-demo-password" type="password" placeholder="Password" /> </Field> <Field> <FieldLabel htmlFor="input-demo-tel">Phone</FieldLabel> <Input id="input-demo-tel" type="tel" placeholder="+1 (555) 123-4567" /> </Field> <Field> <FieldLabel htmlFor="input-demo-url">URL</FieldLabel> <Input id="input-demo-url" type="url" placeholder="https://example.com" /> </Field> <Field> <FieldLabel htmlFor="input-demo-search">Search</FieldLabel> <Input id="input-demo-search" type="search" placeholder="Search" /> </Field> <Field> <FieldLabel htmlFor="input-demo-number">Number</FieldLabel> <Input id="input-demo-number" type="number" placeholder="123" /> </Field> <Field> <FieldLabel htmlFor="input-demo-date">Date</FieldLabel> <Input id="input-demo-date" type="date" /> </Field> <Field> <FieldLabel htmlFor="input-demo-time">Time</FieldLabel> <Input id="input-demo-time" type="time" /> </Field> <Field> <FieldLabel htmlFor="input-demo-file">File</FieldLabel> <Input id="input-demo-file" type="file" /> </Field> </div> </Example> )}
function InputWithSelect() { return ( <Example title="With Select"> <div className="flex w-full gap-2"> <Input type="text" placeholder="Enter amount" className="flex-1" /> <Select defaultValue="usd"> <SelectTrigger aria-label="Select option" className="w-32"> <SelectValue /> </SelectTrigger> <SelectContent> <SelectGroup> <SelectItem value="usd">USD</SelectItem> <SelectItem value="eur">EUR</SelectItem> <SelectItem value="gbp">GBP</SelectItem> </SelectGroup> </SelectContent> </Select> </div> </Example> )}
function InputWithButton() { return ( <Example title="With Button"> <div className="flex w-full gap-2"> <Input type="search" placeholder="Search..." className="flex-1" /> <Button>Search</Button> </div> </Example> )}
function InputWithNativeSelect() { return ( <Example title="With Native Select"> <div className="flex w-full gap-2"> <Input type="tel" placeholder="(555) 123-4567" className="flex-1" /> <NativeSelect aria-label="Select option" defaultValue="+1"> <NativeSelectOption value="+1">+1</NativeSelectOption> <NativeSelectOption value="+44">+44</NativeSelectOption> <NativeSelectOption value="+46">+46</NativeSelectOption> </NativeSelect> </div> </Example> )}
function InputForm() { return ( <Example title="Form"> <form className="w-full"> <FieldGroup> <Field> <FieldLabel htmlFor="form-name">Name</FieldLabel> <Input id="form-name" type="text" placeholder="John Doe" /> </Field> <Field> <FieldLabel htmlFor="form-email">Email</FieldLabel> <Input id="form-email" type="email" placeholder="john@example.com" /> <FieldDescription> We'll never share your email with anyone. </FieldDescription> </Field> <div className="grid grid-cols-2 gap-4"> <Field> <FieldLabel htmlFor="form-phone">Phone</FieldLabel> <Input id="form-phone" type="tel" placeholder="+1 (555) 123-4567" /> </Field> <Field> <FieldLabel htmlFor="form-country">Country</FieldLabel> <Select defaultValue="us"> <SelectTrigger id="form-country"> <SelectValue /> </SelectTrigger> <SelectContent> <SelectGroup> <SelectItem value="us">United States</SelectItem> <SelectItem value="uk">United Kingdom</SelectItem> <SelectItem value="ca">Canada</SelectItem> </SelectGroup> </SelectContent> </Select> </Field> </div> <Field> <FieldLabel htmlFor="form-address">Address</FieldLabel> <Input id="form-address" type="text" placeholder="123 Main St" /> </Field> <Field orientation="horizontal"> <Button type="button" variant="outline"> Cancel </Button> <Button type="submit">Submit</Button> </Field> </FieldGroup> </form> </Example> )}