Checkbox

1import { Checkbox } from '@/components/ui/checkbox';
2
3const invoices = [
4  { id: 'INV-2043', customer: 'Vela Studio', amount: '$1,280', selected: true },
5  { id: 'INV-2044', customer: 'Northwind Labs', amount: '$460', selected: false },
6  { id: 'INV-2045', customer: 'Harbor Freight Co', amount: '$3,910', selected: false },
7];
8
9export function Default() {
10  return (
11    <div className="border-border bg-card w-full max-w-md rounded-xl border">
12      {invoices.map((invoice) => (
13        <div
14          key={invoice.id}
15          className="border-border flex items-center gap-3 border-b p-3 last:border-b-0"
16        >
17          <Checkbox aria-label={`Select invoice ${invoice.id}`} defaultChecked={invoice.selected} />
18          <div className="min-w-0 flex-1">
19            <p className="truncate text-sm font-medium">{invoice.customer}</p>
20            <p className="text-muted-foreground text-xs">{invoice.id}</p>
21          </div>
22          <p className="text-sm tabular-nums">{invoice.amount}</p>
23        </div>
24      ))}
25    </div>
26  );
27}

1import { Checkbox } from '@/components/ui/checkbox';
2
3const invoices = [
4  { id: 'INV-2043', customer: 'Vela Studio', amount: '$1,280', selected: true },
5  { id: 'INV-2044', customer: 'Northwind Labs', amount: '$460', selected: false },
6  { id: 'INV-2045', customer: 'Harbor Freight Co', amount: '$3,910', selected: false },
7];
8
9export function Default() {
10  return (
11    <div className="border-border bg-card w-full max-w-md rounded-xl border">
12      {invoices.map((invoice) => (
13        <div
14          key={invoice.id}
15          className="border-border flex items-center gap-3 border-b p-3 last:border-b-0"
16        >
17          <Checkbox aria-label={`Select invoice ${invoice.id}`} defaultChecked={invoice.selected} />
18          <div className="min-w-0 flex-1">
19            <p className="truncate text-sm font-medium">{invoice.customer}</p>
20            <p className="text-muted-foreground text-xs">{invoice.id}</p>
21          </div>
22          <p className="text-sm tabular-nums">{invoice.amount}</p>
23        </div>
24      ))}
25    </div>
26  );
27}

1import { Checkbox } from '@/components/ui/checkbox';
2import { Label } from '@/components/ui/label';
3
4const alerts = [
5  {
6    id: 'deploy-failed',
7    label: 'A deploy fails',
8    hint: 'Sent to you and to the on call channel.',
9    defaultChecked: true,
10  },
11  {
12    id: 'usage-limit',
13    label: 'Usage passes 80% of the plan limit',
14    hint: 'One email per billing period.',
15    defaultChecked: true,
16  },
17  {
18    id: 'weekly-report',
19    label: 'The weekly traffic report is ready',
20    hint: 'Every Monday at 9:00.',
21    defaultChecked: false,
22  },
23];
24
25export function WithLabel() {
26  return (
27    <div className="flex w-full max-w-md flex-col gap-4">
28      <p className="text-sm font-medium">Email me when</p>
29      {alerts.map((alert) => (
30        <div key={alert.id} className="flex items-start gap-2.5">
31          <Checkbox id={alert.id} defaultChecked={alert.defaultChecked} className="mt-0.5" />
32          <div className="flex flex-col gap-1">
33            <Label htmlFor={alert.id}>{alert.label}</Label>
34            <span className="text-muted-foreground text-xs">{alert.hint}</span>
35          </div>
36        </div>
37      ))}
38    </div>
39  );
40}

1import { Checkbox } from '@/components/ui/checkbox';
2import { Label } from '@/components/ui/label';
3
4const policies = [
5  {
6    id: 'policy-2fa',
7    label: 'Require two factor authentication',
8    hint: 'Enforced by your identity provider.',
9    defaultChecked: true,
10  },
11  {
12    id: 'policy-saml',
13    label: 'Sign in with SAML only',
14    hint: 'Available on the Enterprise plan.',
15    defaultChecked: false,
16  },
17];
18
19export function Disabled() {
20  return (
21    <div className="flex w-full max-w-md flex-col gap-4">
22      <p className="text-sm font-medium">Workspace security</p>
23      {policies.map((policy) => (
24        <div key={policy.id} className="flex items-start gap-2.5">
25          <Checkbox
26            id={policy.id}
27            defaultChecked={policy.defaultChecked}
28            className="mt-0.5"
29            disabled
30          />
31          <div className="flex flex-col gap-1">
32            <Label htmlFor={policy.id} className="opacity-50">
33              {policy.label}
34            </Label>
35            <span className="text-muted-foreground text-xs">{policy.hint}</span>
36          </div>
37        </div>
38      ))}
39    </div>
40  );
41}