Checkbox

The Checkbox component wraps the native checkbox input in the library's styling. It takes sizes, animation speeds and label classes, and inherits them from a Form or Fieldset.

About

It is still a native <input type="checkbox"> underneath, so it submits with the form and behaves the way a browser checkbox does. What the component adds is the styling, the linked label, and the settings it picks up from its parent.

Example

Here is a basic usage example of the Checkbox component:

Svelte 
<script>
  import { Checkbox } from "theui-svelte";
</script>

<Checkbox name="terms">I agree to the terms and conditions</Checkbox>

Name and Value

The name and value props are what the form submission uses. The name prop groups checkboxes, allowing multiple selections under the same category. The value prop is the value sent with the form when the checkbox is checked. To control whether it is checked, use the checked prop.

Svelte 
<Checkbox name="myCheckbox" value="dark-mode">Enable Dark Mode</Checkbox>
<Checkbox name="myCheckbox" value="notifications">Enable Notifications</Checkbox>

Checked State

The checked prop sets whether the checkbox is checked. It is false by default. The prop is bindable, so use bind:checked to read the state when the user toggles the checkbox, or to change it from your code.

Svelte 
<script>
  let subscribed = $state(true);
</script>

<Checkbox name="newsletter" bind:checked={subscribed}>Subscribe to the newsletter</Checkbox>
<p>Subscribed: {subscribed}</p>

Checkbox Sizes

The size prop controls the overall size of the checkbox, making it adaptable to different layouts and UI designs. The available sizes are "sm", "md" (default), "lg" and "xl".

Svelte 
<Checkbox name="myCheckbox" size="sm">Small (sm) checkbox</Checkbox>
<Checkbox name="myCheckbox" size="md">Medium (md) checkbox</Checkbox>
<Checkbox name="myCheckbox" size="lg">Large (lg) checkbox</Checkbox>
<Checkbox name="myCheckbox" size="xl">Extra Large (xl) checkbox</Checkbox>

Animation

The animationSpeed prop determines the speed of the checkbox's interaction effects, such as transitions when toggling states. It helps improve user experience by making interactions feel smoother. The available animation speeds are "none", "slower", "slow" "normal" (default), "fast" and "faster".

Setting it to "none"disables animations, while other values can be used to adjust the transition speed based on preference.

Svelte 
<Checkbox name="myCheckbox" animationSpeed="slower">Slower animation</Checkbox>
<Checkbox name="myCheckbox" animationSpeed="slow">Slow animation</Checkbox>
<Checkbox name="myCheckbox" animationSpeed="normal">Normal animation</Checkbox>
<Checkbox name="myCheckbox" animationSpeed="fast">Fast animation</Checkbox>
<Checkbox name="myCheckbox" animationSpeed="faster">Faster animation</Checkbox>
<Checkbox name="myCheckbox" animationSpeed="none">No animation</Checkbox>

Rounded Checkbox

The rounded prop defines the border-radius of the checkbox, allowing customization of its shape. The available values are "none", "sm" (default), "md", "lg", "xl", "2xl" and "full".

Inside a Form or Fieldset, the checkbox uses their rounded value instead, unless you set the prop on the checkbox.

Svelte 
<Checkbox name="myCheckbox" size="xl" rounded="none">Rounded none checkbox</Checkbox>
<Checkbox name="myCheckbox" size="xl" rounded="sm">Rounded small checkbox</Checkbox>
<Checkbox name="myCheckbox" size="xl" rounded="md">Rounded medium checkbox</Checkbox>
<Checkbox name="myCheckbox" size="xl" rounded="lg">Rounded large checkbox</Checkbox>
<Checkbox name="myCheckbox" size="xl" rounded="xl">Rounded extra large checkbox</Checkbox>
<Checkbox name="myCheckbox" size="xl" rounded="full">Rounded full checkbox</Checkbox>

Resetting Style

The reset prop removes all default styles from the Checkbox component, allowing only custom styles to be applied. This is useful when you want full control over the design. Just set reset to true to apply reset.

Svelte 
<Checkbox name="myCheckbox" reset={true} class="border border-green-500 bg-green-200 checked:bg-green-500 focus:ring-0">Enable Dark Mode</Checkbox>

Label Position

The labelPosition prop controls where the label sits. It accepts "end" (default), which places the label after the checkbox, and "start", which places it before. The position follows the writing direction, so in a right-to-left layout "start" puts the label on the right.

Svelte 
<Checkbox name="myCheckbox">Label after the checkbox</Checkbox>
<Checkbox name="myCheckbox" labelPosition="start">Label before the checkbox</Checkbox>

Disabled Checkbox

Add the native disabled or readonly attribute to prevent changes. The checkbox and its label are dimmed and can't be clicked.

Svelte 
<Checkbox name="myCheckbox" disabled>Disabled checkbox</Checkbox>

Customization

The Checkbox component provides multiple ways to customize its appearance:

  • labelClasses - Custom styles for the label. If used within a Fieldset or Form component, it inherits their labelClasses. The size, animationSpeed, rounded and reset props are inherited the same way.
  • wrapperClasses - Additional classes for the wrapper <div>, useful for layout adjustments.
  • class - Apply custom styles to the checkbox itself.
Svelte 
<Checkbox
  name="myCheckbox"
  wrapperClasses="flex flex-col relative gap-0"
  labelClasses="font-bold z-[1]"
  class="checked:bg-green-500 focus:ring-green-200 focus:border-green-200 w-full h-8"
>
  CUSTOM CHECKBOX
</Checkbox>

Accessibility

The Checkbox component uses the native <input type="checkbox">, so screen readers announce whether it is checked without extra attributes. It also supports aria-required and aria-disabled attributes through props, making it more accessible for users with assistive technologies. Each checkbox has an associated <Label> component to provide a clear description, and the label can be placed before the checkbox for right-aligned designs.

Configuration