Checkbox

The Checkbox component is a versatile and customizable input element used for selecting one or multiple options in a form. It supports various sizes, animations, and styling options to fit different UI requirements.

About

This Checkbox component enhances the default checkbox input with additional styling and customization options. It allows for easy integration into forms while providing a clean and modern design. The component supports different sizes, animations, and customization settings, making it adaptable to various use cases.

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 crucial for form handling. The name prop groups checkboxes, allowing multiple selections under the same category. The value prop determines the selected state of the checkbox.

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

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 animateSpeed 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" animateSpeed="slower">Slower animation</Checkbox>
<Checkbox name="myCheckbox" animateSpeed="slow">Slow animation</Checkbox>
<Checkbox name="myCheckbox" animateSpeed="normal">Normal animation</Checkbox>
<Checkbox name="myCheckbox" animateSpeed="fast">Fast animation</Checkbox>
<Checkbox name="myCheckbox" animateSpeed="faster">Faster animation</Checkbox>
<Checkbox name="myCheckbox" animateSpeed="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", "md" "lg", "xl" and "full".

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

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 false to apply reset.

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

Customization

The Checkbox component provides multiple ways to customize its appearance:

  • labelClasses – Custom styles for the label. If used within a Form component, it inherits the Form's labelClasses.
  • 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="text-red-500 font-bold z-[1]"
  class="w-full h-8"
>
  CUSTOM CHECKBOX
</Checkbox>

Accessibility

The Checkbox component uses the native <input type="checkbox"> and automatically adjusts the aria-checked attribute based on whether the checkbox is checked or unchecked. 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 layout can be reversed for right-aligned designs.

Configuration