mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-09 06:55:07 +00:00
47c47eaed2
* feat: add base and radix docs * feat: transform code for display * fix * fix * fix * fix * fix * chore: remove claude files * fix * fix * fix * chore: run format:write * fix * feat: add more examples * fix * feat: add aspect-ratio * feat: add avatar * feat: add badge * feat: add breadcrumb * fix * feat: add button * fix * fix * fix * feat: add calendar and card * feat: add carousel * fix: chart * feat: add checkbox * feat: add collapsible * feat: add combobox * feat: add command * feat: add context menu * feat: add data-table dialog and drawer * feat: dropdown-menu * feat: add date-picker * feat: add empty * feat: add field and hover-card * fix: input * feat: add input * feat: add input-group * feat: add input-otp * feat: add item * feat: add kbd and label * feat: add menubar * feat: add native-select * feat: add more components * feat: more components * feat: more components * feat: add skeleton, slider and sonner * feat: add spinner and switch * feat: add more components * fix: tabs * fix: tabs * feat: add docs for sidebar * fix * fix * fi * docs: update * fix: create page * fix * fix * chore: add changelog * fix
21 lines
7.9 KiB
JSON
21 lines
7.9 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "input-example",
|
|
"title": "Input",
|
|
"registryDependencies": [
|
|
"button",
|
|
"field",
|
|
"input",
|
|
"native-select",
|
|
"select",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-nova/examples/input-example.tsx",
|
|
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n NativeSelect,\n NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-nova/ui/select\"\n\nexport default function InputExample() {\n return (\n <ExampleWrapper>\n <InputBasic />\n <InputInvalid />\n <InputWithLabel />\n <InputWithDescription />\n <InputDisabled />\n <InputTypes />\n <InputWithSelect />\n <InputWithButton />\n <InputWithNativeSelect />\n <InputForm />\n </ExampleWrapper>\n )\n}\n\nfunction InputBasic() {\n return (\n <Example title=\"Basic\">\n <Input type=\"email\" placeholder=\"Email\" />\n </Example>\n )\n}\n\nfunction InputInvalid() {\n return (\n <Example title=\"Invalid\">\n <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n </Example>\n )\n}\n\nfunction InputWithLabel() {\n return (\n <Example title=\"With Label\">\n <Field>\n <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n <Input\n id=\"input-demo-email\"\n type=\"email\"\n placeholder=\"name@example.com\"\n />\n </Field>\n </Example>\n )\n}\n\nfunction InputWithDescription() {\n return (\n <Example title=\"With Description\">\n <Field>\n <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n <Input\n id=\"input-demo-username\"\n type=\"text\"\n placeholder=\"Enter your username\"\n />\n <FieldDescription>\n Choose a unique username for your account.\n </FieldDescription>\n </Field>\n </Example>\n )\n}\n\nfunction InputDisabled() {\n return (\n <Example title=\"Disabled\">\n <Field>\n <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n <Input\n id=\"input-demo-disabled\"\n type=\"email\"\n placeholder=\"Email\"\n disabled\n />\n </Field>\n </Example>\n )\n}\n\nfunction InputTypes() {\n return (\n <Example title=\"Input Types\">\n <div className=\"flex w-full flex-col gap-6\">\n <Field>\n <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n <Input\n id=\"input-demo-password\"\n type=\"password\"\n placeholder=\"Password\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n <Input\n id=\"input-demo-tel\"\n type=\"tel\"\n placeholder=\"+1 (555) 123-4567\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n <Input\n id=\"input-demo-url\"\n type=\"url\"\n placeholder=\"https://example.com\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n <Input id=\"input-demo-date\" type=\"date\" />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n <Input id=\"input-demo-time\" type=\"time\" />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n <Input id=\"input-demo-file\" type=\"file\" />\n </Field>\n </div>\n </Example>\n )\n}\n\nfunction InputWithSelect() {\n return (\n <Example title=\"With Select\">\n <div className=\"flex w-full gap-2\">\n <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n <Select defaultValue=\"usd\">\n <SelectTrigger className=\"w-32\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"usd\">USD</SelectItem>\n <SelectItem value=\"eur\">EUR</SelectItem>\n <SelectItem value=\"gbp\">GBP</SelectItem>\n </SelectContent>\n </Select>\n </div>\n </Example>\n )\n}\n\nfunction InputWithButton() {\n return (\n <Example title=\"With Button\">\n <div className=\"flex w-full gap-2\">\n <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n <Button>Search</Button>\n </div>\n </Example>\n )\n}\n\nfunction InputWithNativeSelect() {\n return (\n <Example title=\"With Native Select\">\n <div className=\"flex w-full gap-2\">\n <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n <NativeSelect defaultValue=\"+1\">\n <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n </NativeSelect>\n </div>\n </Example>\n )\n}\n\nfunction InputForm() {\n return (\n <Example title=\"Form\">\n <form className=\"w-full\">\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n <Input\n id=\"form-email\"\n type=\"email\"\n placeholder=\"john@example.com\"\n />\n <FieldDescription>\n We'll never share your email with anyone.\n </FieldDescription>\n </Field>\n <div className=\"grid grid-cols-2 gap-4\">\n <Field>\n <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n <Input\n id=\"form-phone\"\n type=\"tel\"\n placeholder=\"+1 (555) 123-4567\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n <Select defaultValue=\"us\">\n <SelectTrigger id=\"form-country\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"us\">United States</SelectItem>\n <SelectItem value=\"uk\">United Kingdom</SelectItem>\n <SelectItem value=\"ca\">Canada</SelectItem>\n </SelectContent>\n </Select>\n </Field>\n </div>\n <Field>\n <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n </Field>\n <Field orientation=\"horizontal\">\n <Button type=\"button\" variant=\"outline\">\n Cancel\n </Button>\n <Button type=\"submit\">Submit</Button>\n </Field>\n </FieldGroup>\n </form>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |