Checkbox

 1import { Checkbox } from "@/components/wensity/checkbox";
 2
 3export function CheckboxSoft() {
 4  return (
 5    <Checkbox
 6      variant="soft"
 7      defaultChecked
 8      label="Enable smart suggestions"
 9      description="Use recent activity to improve recommendations."
10    />
11  );
12}

 1"use client";
 2
 3import * as React from "react";
 4import { Checkbox, CheckboxGroup } from "@/components/wensity/checkbox";
 5
 6export function CheckboxGroupDemo() {
 7  const [values, setValues] = React.useState({
 8    email: true,
 9    inApp: true,
10    sms: false,
11  });
12
13  return (
14    <CheckboxGroup label="Notification channels">
15      <Checkbox
16        label="Email"
17        checked={values.email}
18        onCheckedChange={(checked) =>
19          setValues((current) => ({ ...current, email: checked }))
20        }
21      />
22      <Checkbox
23        variant="soft"
24        label="In-app inbox"
25        checked={values.inApp}
26        onCheckedChange={(checked) =>
27          setValues((current) => ({ ...current, inApp: checked }))
28        }
29      />
30      <Checkbox
31        variant="soft"
32        label="SMS"
33        checked={values.sms}
34        onCheckedChange={(checked) =>
35          setValues((current) => ({ ...current, sms: checked }))
36        }
37      />
38    </CheckboxGroup>
39  );
40}

 1import { CheckboxCard, CheckboxGroup } from "@/components/wensity/checkbox";
 2
 3export function CheckboxPermissions() {
 4  return (
 5    <CheckboxGroup label="Team permissions">
 6      <CheckboxCard
 7        label="Manage members"
 8        description="Invite teammates, edit roles, and remove access."
 9        defaultChecked
10        trailing="Admin"
11      />
12      <CheckboxCard
13        label="Edit registry"
14        description="Create, update, and publish component entries."
15        defaultChecked
16        variant="soft"
17        trailing="Editor"
18      />
19      <CheckboxCard
20        label="View analytics"
21        description="Read usage, downloads, and conversion reports."
22        trailing="Viewer"
23      />
24    </CheckboxGroup>
25  );
26}

 1"use client";
 2
 3import * as React from "react";
 4import {
 5  Checkbox,
 6  type CheckboxCheckedState,
 7} from "@/components/wensity/checkbox";
 8
 9export function CheckboxIndeterminate() {
10  const [state, setState] =
11    React.useState<CheckboxCheckedState>("indeterminate");
12
13  return (
14    <Checkbox
15      checked={state}
16      onCheckedChange={(checked) => setState(checked)}
17      label="Select visible rows"
18      description="Useful for table headers and bulk actions."
19    />
20  );
21}

 1import { Checkbox } from "@/components/wensity/checkbox";
 2
 3export function CheckboxError() {
 4  return (
 5    <Checkbox
 6      label="I understand the billing impact"
 7      description="Required before changing plan limits."
 8      error="Confirm this before continuing."
 9    />
10  );
11}

 1import { Checkbox } from "@/components/wensity/checkbox";
 2
 3export function CheckboxDisabled() {
 4  return (
 5    <div className="space-y-4">
 6      <Checkbox disabled label="SAML single sign-on" />
 7      <Checkbox
 8        disabled
 9        defaultChecked
10        variant="soft"
11        label="Audit logging"
12      />
13    </div>
14  );
15}

 1import { CheckboxCard } from "@/components/wensity/checkbox";
 2
 3export function CheckboxSettings() {
 4  return (
 5    <div className="space-y-3">
 6      <CheckboxCard
 7        label="Weekly product digest"
 8        description="A concise summary of new components and fixes."
 9        defaultChecked
10      />
11      <CheckboxCard
12        label="Realtime billing alerts"
13        description="Send a notification when usage crosses plan limits."
14        defaultChecked
15      />
16      <CheckboxCard
17        label="Security review required"
18        description="Require admin approval for new API tokens."
19        variant="soft"
20      />
21    </div>
22  );
23}