Basic Variations

Standard checkbox components with different configurations.

Default

Default Checkbox

<Checkbox label="Default Checkbox" />

With Help Text (Stacked)

Comments

Get notified when someone posts a comment on a posting.

<Checkbox
  label="Comments"
  helpText="Get notified when someone posts a comment on a posting."
  helpTextVariant="stacked"
/>

With Help Text (Inline)

Email notificationsReceive updates via email

<Checkbox
  label="Email notifications"
  helpText="Receive updates via email"
  helpTextVariant="inline"
/>

Checkbox Positions

Checkboxes with different positioning options.

Checkbox on Left (Default)

Left Checkbox

This is the default position

<Checkbox
  label="Left Checkbox"
  helpText="This is the default position"
  checkboxPosition="left"
/>

Checkbox on Right

Right Checkbox

Checkbox positioned on the right

<Checkbox
  label="Right Checkbox"
  helpText="Checkbox positioned on the right"
  checkboxPosition="right"
/>

States

Checkboxes in different states: checked, disabled, etc.

Checked

Checked Checkbox

<Checkbox label="Checked Checkbox" defaultChecked />

Disabled

Disabled Checkbox

This checkbox cannot be interacted with

<Checkbox
  label="Disabled Checkbox"
  helpText="This checkbox cannot be interacted with"
  disabled
/>

Disabled and Checked

<Checkbox label="Disabled and Checked" defaultChecked disabled />

Without Help Text

Checkboxes without additional help text.

Label Only (Left)

Accept terms and conditions

<Checkbox label="Accept terms and conditions" />

Label Only (Right)

Subscribe to newsletter

<Checkbox
  label="Subscribe to newsletter"
  checkboxPosition="right"
/>

Long Text Examples

Checkboxes with extended text content.

Long Label

This is a very long label that demonstrates how the checkbox component handles extended text content without breaking the layout

<Checkbox label="This is a very long label that demonstrates how the checkbox component handles extended text content without breaking the layout" />

Long Help Text

Terms and Conditions

By checking this box, you acknowledge that you have read, understood, and agree to our extensive terms of service, privacy policy, and user agreement, which outline your rights and responsibilities as a user of our platform.

<Checkbox
  label="Terms and Conditions"
  helpText="By checking this box, you acknowledge that you have read, understood, and agree to our extensive terms of service, privacy policy, and user agreement, which outline your rights and responsibilities as a user of our platform."
/>

Checkbox Component Catalog

Checkbox Variants