Wensity

Checkbox

A native-checkbox primitive for product forms and settings surfaces. It includes classic, soft, dot, and toggle visual variants, label and description copy, error state, disabled state, indeterminate state, checkbox groups, and card-style checkbox rows.

checkboxformfieldsettingspermissionsfiltersindeterminateerrordashboard
Loading preview...

Examples

Practical examples and common states for the same installable component.

Classic

Compact square checkbox for standard forms.

examples/checkbox-classic.tsx
import { Checkbox } from "@/components/wensity/checkbox";


export function CheckboxClassic() {
  return (
    <Checkbox
      defaultChecked
      label="I agree to the terms and privacy policy"
      description="You can review both documents before continuing."
    />
  );
}

Soft

Rounded muted checkbox with a quieter selected state.

examples/checkbox-soft.tsx
import { Checkbox } from "@/components/wensity/checkbox";


export function CheckboxSoft() {
  return (
    <Checkbox
      variant="soft"
      defaultChecked
      label="Enable smart suggestions"
      description="Use recent activity to improve recommendations."
    />
  );
}

Dot

Circular checkbox style for filter and preference lists.

examples/checkbox-dot.tsx
import { Checkbox } from "@/components/wensity/checkbox";


export function CheckboxDot() {
  return (
    <Checkbox
      variant="dot"
      defaultChecked
      label="Include experimental features"
      description="Show beta tools and preview releases in your workspace."
    />
  );
}

Toggle

Switch-shaped checkbox for binary settings without changing semantics.

examples/checkbox-toggle.tsx
import { Checkbox } from "@/components/wensity/checkbox";


export function CheckboxToggle() {
  return (
    <Checkbox
      variant="toggle"
      defaultChecked
      label="Sync changes automatically"
      description="Keep drafts updated across devices in the background."
    />
  );
}

Group

Group related checkbox choices with shared label and description.

examples/checkbox-group.tsx
"use client";


import * as React from "react";
import { Checkbox, CheckboxGroup } from "@/components/wensity/checkbox";


export function CheckboxGroupDemo() {
  const [values, setValues] = React.useState({
    email: true,
    inApp: true,
    sms: false,
  });


  return (
    <CheckboxGroup label="Notification channels">
      <Checkbox
        label="Email"
        checked={values.email}
        onCheckedChange={(checked) =>
          setValues((current) => ({ ...current, email: checked }))
        }
      />
      <Checkbox
        variant="soft"
        label="In-app inbox"
        checked={values.inApp}
        onCheckedChange={(checked) =>
          setValues((current) => ({ ...current, inApp: checked }))
        }
      />
      <Checkbox
        variant="dot"
        label="SMS"
        checked={values.sms}
        onCheckedChange={(checked) =>
          setValues((current) => ({ ...current, sms: checked }))
        }
      />
    </CheckboxGroup>
  );
}

Permissions

Card checkbox rows for settings, roles, and permission lists.

examples/checkbox-permissions.tsx
import { CheckboxCard, CheckboxGroup } from "@/components/wensity/checkbox";


export function CheckboxPermissions() {
  return (
    <CheckboxGroup label="Team permissions">
      <CheckboxCard
        label="Manage members"
        description="Invite teammates, edit roles, and remove access."
        defaultChecked
        trailing="Admin"
      />
      <CheckboxCard
        label="Edit registry"
        description="Create, update, and publish component entries."
        defaultChecked
        variant="soft"
        trailing="Editor"
      />
      <CheckboxCard
        label="View analytics"
        description="Read usage, downloads, and conversion reports."
        variant="dot"
        trailing="Viewer"
      />
    </CheckboxGroup>
  );
}

Indeterminate

Mixed state for table headers and bulk selection.

examples/checkbox-indeterminate.tsx
"use client";


import * as React from "react";
import {
  Checkbox,
  type CheckboxCheckedState,
} from "@/components/wensity/checkbox";


export function CheckboxIndeterminate() {
  const [state, setState] =
    React.useState<CheckboxCheckedState>("indeterminate");


  return (
    <Checkbox
      checked={state}
      onCheckedChange={(checked) => setState(checked)}
      label="Select visible rows"
      description="Useful for table headers and bulk actions."
    />
  );
}

Error

Validation state with error copy connected through aria-describedby.

examples/checkbox-error.tsx
import { Checkbox } from "@/components/wensity/checkbox";


export function CheckboxError() {
  return (
    <Checkbox
      label="I understand the billing impact"
      description="Required before changing plan limits."
      error="Confirm this before continuing."
    />
  );
}

Disabled

Disabled states keep the row readable while blocking interaction.

examples/checkbox-disabled.tsx
import { Checkbox } from "@/components/wensity/checkbox";


export function CheckboxDisabled() {
  return (
    <div className="space-y-4">
      <Checkbox disabled label="SAML single sign-on" />
      <Checkbox
        disabled
        defaultChecked
        variant="toggle"
        label="Audit logging"
      />
    </div>
  );
}

Settings

A realistic settings list mixing checkbox variants intentionally.

examples/checkbox-settings.tsx
import { CheckboxCard } from "@/components/wensity/checkbox";


export function CheckboxSettings() {
  return (
    <div className="space-y-3">
      <CheckboxCard
        label="Weekly product digest"
        description="A concise summary of new components and fixes."
        variant="toggle"
        defaultChecked
      />
      <CheckboxCard
        label="Realtime billing alerts"
        description="Send a notification when usage crosses plan limits."
        defaultChecked
      />
      <CheckboxCard
        label="Security review required"
        description="Require admin approval for new API tokens."
        variant="soft"
      />
    </div>
  );
}