Label

1
import { Checkbox } from "~/components/ui/checkbox";
2
import { Label } from "~/components/ui/label";
3

4
export default function LabelDemo() {
5
  return (
6
    <div class="flex gap-2">
7
      <Checkbox id="terms" />
8
      <Label for="terms">Accept terms and conditions</Label>
9
    </div>
10
  );
11
}

1
import { Button } from "~/components/ui/button";
2
import { Checkbox } from "~/components/ui/checkbox";
3
import {
4
  Field,
5
  FieldDescription,
6
  FieldGroup,
7
  FieldLabel,
8
  FieldLegend,
9
  FieldSeparator,
10
  FieldSet,
11
} from "~/components/ui/field";
12
import { Input } from "~/components/ui/input";
13
import {
14
  Select,
15
  SelectContent,
16
  SelectItem,
17
  SelectTrigger,
18
  SelectValue,
19
} from "~/components/ui/select";
20
import { Textarea } from "~/components/ui/textarea";
21

22
const months = [
23
  { label: "01", value: "01" },
24
  { label: "02", value: "02" },
25
  { label: "03", value: "03" },
26
  { label: "04", value: "04" },
27
  { label: "05", value: "05" },
28
  { label: "06", value: "06" },
29
  { label: "07", value: "07" },
30
  { label: "08", value: "08" },
31
  { label: "09", value: "09" },
32
  { label: "10", value: "10" },
33
  { label: "11", value: "11" },
34
  { label: "12", value: "12" },
35
];
36

37
const years = [
38
  { label: "2024", value: "2024" },
39
  { label: "2025", value: "2025" },
40
  { label: "2026", value: "2026" },
41
  { label: "2027", value: "2027" },
42
  { label: "2028", value: "2028" },
43
  { label: "2029", value: "2029" },
44
];
45

46
export default function FieldDemo() {
47
  return (
48
    <div class="w-full max-w-md">
49
      <form>
50
        <FieldGroup>
51
          <FieldSet>
52
            <FieldLegend>Payment Method</FieldLegend>
53
            <FieldDescription>All transactions are secure and encrypted</FieldDescription>
54
            <FieldGroup>
55
              <Field>
56
                <FieldLabel for="checkout-card-name">Name on Card</FieldLabel>
57
                <Input id="checkout-card-name" placeholder="Evil Rabbit" required />
58
              </Field>
59
              <Field>
60
                <FieldLabel for="checkout-card-number">Card Number</FieldLabel>
61
                <Input id="checkout-card-number" placeholder="1234 5678 9012 3456" required />
62
                <FieldDescription>Enter your 16-digit card number</FieldDescription>
63
              </Field>
64
              <div class="grid grid-cols-3 gap-4">
65
                <Field>
66
                  <FieldLabel for="checkout-exp-month">Month</FieldLabel>
67
                  <Select
68
                    options={months}
69
                    optionValue="value"
70
                    optionTextValue="label"
71
                    placeholder="MM"
72
                    itemComponent={(props) => (
73
                      <SelectItem item={props.item}>{props.item.rawValue.label}</SelectItem>
74
                    )}
75
                  >
76
                    <SelectTrigger id="checkout-exp-month">
77
                      <SelectValue<(typeof months)[number]>>
78
                        {(state) => state.selectedOption().label}
79
                      </SelectValue>
80
                    </SelectTrigger>
81
                    <SelectContent />
82
                  </Select>
83
                </Field>
84
                <Field>
85
                  <FieldLabel for="checkout-exp-year">Year</FieldLabel>
86
                  <Select
87
                    options={years}
88
                    optionValue="value"
89
                    optionTextValue="label"
90
                    placeholder="YYYY"
91
                    itemComponent={(props) => (
92
                      <SelectItem item={props.item}>{props.item.rawValue.label}</SelectItem>
93
                    )}
94
                  >
95
                    <SelectTrigger id="checkout-exp-year">
96
                      <SelectValue<(typeof years)[number]>>
97
                        {(state) => state.selectedOption().label}
98
                      </SelectValue>
99
                    </SelectTrigger>
100
                    <SelectContent />
101
                  </Select>
102
                </Field>
103
                <Field>
104
                  <FieldLabel for="checkout-cvv">CVV</FieldLabel>
105
                  <Input id="checkout-cvv" placeholder="123" required />
106
                </Field>
107
              </div>
108
            </FieldGroup>
109
          </FieldSet>
110
          <FieldSeparator />
111
          <FieldSet>
112
            <FieldLegend>Billing Address</FieldLegend>
113
            <FieldDescription>
114
              The billing address associated with your payment method
115
            </FieldDescription>
116
            <FieldGroup>
117
              <Field orientation="horizontal">
118
                <Checkbox id="checkout-same-as-shipping" defaultChecked />
119
                <FieldLabel for="checkout-same-as-shipping" class="font-normal">
120
                  Same as shipping address
121
                </FieldLabel>
122
              </Field>
123
            </FieldGroup>
124
          </FieldSet>
125
          <FieldSet>
126
            <FieldGroup>
127
              <Field>
128
                <FieldLabel for="checkout-comments">Comments</FieldLabel>
129
                <Textarea
130
                  id="checkout-comments"
131
                  placeholder="Add any additional comments"
132
                  class="resize-none"
133
                />
134
              </Field>
135
            </FieldGroup>
136
          </FieldSet>
137
          <Field orientation="horizontal">
138
            <Button type="submit">Submit</Button>
139
            <Button variant="outline" type="button">
140
              Cancel
141
            </Button>
142
          </Field>
143
        </FieldGroup>
144
      </form>
145
    </div>
146
  );
147
}