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>
|
|
)
|
|
}
|