Label

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/radix-sera/components/example"
5import { Checkbox } from "@/registry/radix-sera/ui/checkbox"
6import { Field } from "@/registry/radix-sera/ui/field"
7import { Input } from "@/registry/radix-sera/ui/input"
8import { Label } from "@/registry/radix-sera/ui/label"
9import { Textarea } from "@/registry/radix-sera/ui/textarea"
10 
11export default function LabelExample() {
12  return (
13    <ExampleWrapper>
14      <LabelWithCheckbox />
15      <LabelWithInput />
16      <LabelDisabled />
17      <LabelWithTextarea />
18    </ExampleWrapper>
19  )
20}
21 
22function LabelWithCheckbox() {
23  return (
24    <Example title="With Checkbox">
25      <Field orientation="horizontal">
26        <Checkbox id="label-demo-terms" />
27        <Label htmlFor="label-demo-terms">Accept terms and conditions</Label>
28      </Field>
29    </Example>
30  )
31}
32 
33function LabelWithInput() {
34  return (
35    <Example title="With Input">
36      <Field>
37        <Label htmlFor="label-demo-username">Username</Label>
38        <Input id="label-demo-username" placeholder="Username" />
39      </Field>
40    </Example>
41  )
42}
43 
44function LabelDisabled() {
45  return (
46    <Example title="Disabled">
47      <Field data-disabled={true}>
48        <Label htmlFor="label-demo-disabled">Disabled</Label>
49        <Input id="label-demo-disabled" placeholder="Disabled" disabled />
50      </Field>
51    </Example>
52  )
53}
54 
55function LabelWithTextarea() {
56  return (
57    <Example title="With Textarea">
58      <Field>
59        <Label htmlFor="label-demo-message">Message</Label>
60        <Textarea id="label-demo-message" placeholder="Message" />
61      </Field>
62    </Example>
63  )
64}