// Generated by scripts/generate-showcase.mjs. Do not edit directly. page CheckboxDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_id = ctx.url.searchParams.get("pg_id") ?? "checkbox-1" state playground_name = ctx.url.searchParams.get("pg_name") ?? "checkboxField" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Accept notifications" state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter checkbox" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" state playground_value = ctx.url.searchParams.get("pg_value") ?? "terms" state playground_values = ctx.url.searchParams.get("pg_values") ?? "[]" state playground_options = ctx.url.searchParams.get("pg_options") ?? "[]" state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "true" state playground_indeterminate = ctx.url.searchParams.get("pg_indeterminate") ?? "false" state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "vertical" state playground_card = ctx.url.searchParams.get("pg_card") ?? "false" state playground_rightAligned = ctx.url.searchParams.get("pg_rightAligned") ?? "false" state playground_list = ctx.url.searchParams.get("pg_list") ?? "false" state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "" state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? "" state playground_error = ctx.url.searchParams.get("pg_error") ?? "" state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false" state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Checkbox" description = "Theme-aware, responsive checkbox component." } view {
Forms component

Checkbox

Theme-aware, responsive checkbox component.

27 props0 slots5 eventsTheme readyResponsive
Interactive playground

Configure Checkbox

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Checkbox
  id="checkbox-1"
  name="checkboxField"
  label="Accept notifications"
  placeholder="Enter checkbox"
  value="terms"
  values='[]'
  options='[]'
  checked="true"
/>
Component props27 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Default checkbox

Use a checkbox for an independent yes-or-no choice.

01
Live preview
Component usage.wrn
<Checkbox
  id="checkbox-1"
  name="checkboxField"
  label="Accept notifications"
  placeholder="Enter checkbox"
  value="terms"
  values='[]'
  options='[]'
  checked="true"
/>
States

Indeterminate

Represent a partially selected group with the mixed state.

02
Live preview
Component usage.wrn
<Checkbox
  id="checkbox-2"
  name="checkboxField"
  label="Accept notifications"
  placeholder="Enter checkbox"
  variant="outlined"
  icon="icon-[lucide--sparkles]"
  value="terms"
  values='[]'
  options='[]'
  indeterminate="true"
/>
States

Disabled

Disable a checkbox when its choice is unavailable.

03
Live preview
Component usage.wrn
<Checkbox
  id="checkbox-3"
  name="checkboxField"
  label="Accept notifications"
  placeholder="Enter checkbox"
  variant="floating"
  icon="icon-[lucide--circle-user-round]"
  iconPosition="end"
  value="terms"
  values='[]'
  options='[]'
  disabled="true"
/>
Groups

Checkbox group options

Render passed options as a named checkbox group.

04
Live preview
Component usage.wrn
<Checkbox
  size="sm"
  id="checkbox-4"
  name="checkboxField"
  label="Notification preferences"
  placeholder="Enter checkbox"
  variant="pill"
  value="terms"
  values='[
    "product"
  ]'
  options='[
    {
      "label": "Product updates",
      "value": "product",
      "description": ""
    },
    {
      "label": "Account activity",
      "value": "account",
      "description": ""
    },
    {
      "label": "Partner offers",
      "value": "partners",
      "description": ""
    }
  ]'
  orientation="horizontal"
/>
Content

Checkboxes with descriptions

Add supporting copy to clarify each choice.

05
Live preview
Component usage.wrn
<Checkbox
  id="checkbox-5"
  name="checkboxField"
  label="Notification preferences"
  placeholder="Enter checkbox"
  value="terms"
  values='[
    "product"
  ]'
  options='[
    {
      "label": "Product updates",
      "value": "product",
      "description": "News about features and improvements."
    },
    {
      "label": "Account activity",
      "value": "account",
      "description": "Important security and billing alerts."
    },
    {
      "label": "Partner offers",
      "value": "partners",
      "description": "Relevant offers from trusted partners."
    }
  ]'
  readonly="true"
/>
Cards

Checkbox cards

Present multiple choices as selectable horizontal cards.

06
Live preview
Component usage.wrn
<Checkbox
  id="checkbox-6"
  name="checkboxField"
  label="Notification preferences"
  placeholder="Enter checkbox"
  value="terms"
  values='[
    "product"
  ]'
  options='[
    {
      "label": "Product updates",
      "value": "product",
      "description": "News about features and improvements."
    },
    {
      "label": "Account activity",
      "value": "account",
      "description": "Important security and billing alerts."
    },
    {
      "label": "Partner offers",
      "value": "partners",
      "description": "Relevant offers from trusted partners."
    }
  ]'
  orientation="horizontal"
  card="true"
/>
Cards

Vertical checkbox cards

Stack selectable checkbox cards vertically.

07
Live preview
Component usage.wrn
<Checkbox
  id="checkbox-7"
  name="checkboxField"
  label="Notification preferences"
  placeholder="Enter checkbox"
  value="terms"
  values='[
    "product"
  ]'
  options='[
    {
      "label": "Product updates",
      "value": "product",
      "description": "News about features and improvements."
    },
    {
      "label": "Account activity",
      "value": "account",
      "description": "Important security and billing alerts."
    },
    {
      "label": "Partner offers",
      "value": "partners",
      "description": "Relevant offers from trusted partners."
    }
  ]'
  card="true"
  inline="true"
/>
Alignment

Right-aligned checkbox

Place checkbox controls at the far edge of their labels.

08
Live preview
Component usage.wrn
<Checkbox
  id="checkbox-8"
  name="checkboxField"
  label="Notification preferences"
  placeholder="Enter checkbox"
  value="terms"
  values='[
    "product"
  ]'
  options='[
    {
      "label": "Product updates",
      "value": "product",
      "description": "News about features and improvements."
    },
    {
      "label": "Account activity",
      "value": "account",
      "description": "Important security and billing alerts."
    },
    {
      "label": "Partner offers",
      "value": "partners",
      "description": "Relevant offers from trusted partners."
    }
  ]'
  rightAligned="true"
  cornerHint="Optional"
/>
Lists

Checkbox list group

Separate checkbox options with list dividers.

09
Live preview
Component usage.wrn
<Checkbox
  id="checkbox-9"
  name="checkboxField"
  label="Notification preferences"
  placeholder="Enter checkbox"
  value="terms"
  values='[
    "product"
  ]'
  options='[
    {
      "label": "Product updates",
      "value": "product",
      "description": "News about features and improvements."
    },
    {
      "label": "Account activity",
      "value": "account",
      "description": "Important security and billing alerts."
    },
    {
      "label": "Partner offers",
      "value": "partners",
      "description": "Relevant offers from trusted partners."
    }
  ]'
  list="true"
/>
Lists

Horizontal checkbox list group

Combine list styling with a horizontal layout.

010
Live preview
Component usage.wrn
<Checkbox
  id="checkbox-10"
  name="checkboxField"
  label="Notification preferences"
  placeholder="Enter checkbox"
  value="terms"
  values='[
    "product"
  ]'
  options='[
    {
      "label": "Product updates",
      "value": "product",
      "description": "News about features and improvements."
    },
    {
      "label": "Account activity",
      "value": "account",
      "description": "Important security and billing alerts."
    },
    {
      "label": "Partner offers",
      "value": "partners",
      "description": "Relevant offers from trusted partners."
    }
  ]'
  orientation="horizontal"
  list="true"
/>
Validation

Validation states

Validate required checkbox choices with @wrnexus/validation.

011
Live preview
Component usage.wrn
<Checkbox
  id="checkbox-11"
  name="validatedField"
  label="Notification preferences"
  placeholder="Enter checkbox"
  value="terms"
  values='[
    "product"
  ]'
  options='[
    {
      "label": "Product updates",
      "value": "product",
      "description": "News about features and improvements."
    },
    {
      "label": "Account activity",
      "value": "account",
      "description": "Important security and billing alerts."
    },
    {
      "label": "Partner offers",
      "value": "partners",
      "description": "Relevant offers from trusted partners."
    }
  ]'
  helperText="Select at least one notification type."
  required="true"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@inputFires immediately as the component value changes.
@changeFires when the component value or selection changes.
@focusFires when the component receives focus.
@blurFires when focus leaves the component.
@invalidFires when the component emits the invalid event.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('input', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
idstring""No
namestring""No
labelstring"Checkbox"No
hiddenLabelbooleanfalseNo
placeholderstring""No
variantstring"normal"No
iconstring""No
iconPositionstring"start"No
valuestring"on"No
valuesstring[]No
optionsstring[]No
checkedbooleanfalseNo
indeterminatebooleanfalseNo
orientationstring"vertical"No
cardbooleanfalseNo
rightAlignedbooleanfalseNo
listbooleanfalseNo
helperTextstring""No
cornerHintstring""No
errorstring""No
inlinebooleanfalseNo
readonlybooleanfalseNo
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
} }