mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
16c4453cc1
Squash merge of shadcn-ui/ui main branch into hanzo/ui, bringing in: - [email protected] through [email protected] releases - New apps/v4 directory structure - Registry system improvements and MCP server - Framework support (Vue, Svelte, React Native) - New templates (vite-app, monorepo-next, laravel) - Zod 4 compatibility (scoped override for zod@>4) - Test fixture corrections for alias resolution All 867 merge conflicts resolved preserving Hanzo customizations. 1020/1020 shadcn tests pass.
65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import {
|
|
Example,
|
|
ExampleWrapper,
|
|
} from "@/registry/bases/base/components/example"
|
|
import { Checkbox } from "@/registry/bases/base/ui/checkbox"
|
|
import { Field } from "@/registry/bases/base/ui/field"
|
|
import { Input } from "@/registry/bases/base/ui/input"
|
|
import { Label } from "@/registry/bases/base/ui/label"
|
|
import { Textarea } from "@/registry/bases/base/ui/textarea"
|
|
|
|
export default function LabelExample() {
|
|
return (
|
|
<ExampleWrapper>
|
|
<LabelWithCheckbox />
|
|
<LabelWithInput />
|
|
<LabelDisabled />
|
|
<LabelWithTextarea />
|
|
</ExampleWrapper>
|
|
)
|
|
}
|
|
|
|
function LabelWithCheckbox() {
|
|
return (
|
|
<Example title="With Checkbox">
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="label-demo-terms" />
|
|
<Label htmlFor="label-demo-terms">Accept terms and conditions</Label>
|
|
</Field>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function LabelWithInput() {
|
|
return (
|
|
<Example title="With Input">
|
|
<Field>
|
|
<Label htmlFor="label-demo-username">Username</Label>
|
|
<Input id="label-demo-username" placeholder="Username" />
|
|
</Field>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function LabelDisabled() {
|
|
return (
|
|
<Example title="Disabled">
|
|
<Field data-disabled={true}>
|
|
<Label htmlFor="label-demo-disabled">Disabled</Label>
|
|
<Input id="label-demo-disabled" placeholder="Disabled" disabled />
|
|
</Field>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function LabelWithTextarea() {
|
|
return (
|
|
<Example title="With Textarea">
|
|
<Field>
|
|
<Label htmlFor="label-demo-message">Message</Label>
|
|
<Textarea id="label-demo-message" placeholder="Message" />
|
|
</Field>
|
|
</Example>
|
|
)
|
|
}
|