# 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 `` 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: ```html I agree to the terms and conditions ``` ## 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. ```html Enable Dark Mode Enable Notifications ``` ## 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. ```html Subscribe to the newsletter

Subscribed: {subscribed}

``` ## 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"`. ```html Small (sm) checkbox Medium (md) checkbox Large (lg) checkbox Extra Large (xl) 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. ```html Slower animation Slow animation Normal animation Fast animation Faster animation No animation ``` ## 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. ```html Rounded none checkbox Rounded small checkbox Rounded medium checkbox Rounded large checkbox Rounded extra large checkbox Rounded full 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. ```html Enable Dark Mode ``` ## 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. ```html Label after the checkbox Label before the 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. ```html Disabled 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 , useful for layout adjustments. - `class` - Apply custom styles to the checkbox itself. ```html CUSTOM CHECKBOX ``` ## Accessibility The `Checkbox` component uses the native ``, 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 `