This is the llms.txt documentation for the "checkboxes" directory of the Origin UI - Svelte project. # "checkboxes" directory > A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications. This documentation covers 18 components, each following best practices for accessibility, performance, and type safety. ## Components ## checkbox-01 > A type-safe, accessible checkbox-01 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-01` - **Location**: `/src/lib/components/checkboxes/checkbox-01.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-01.svelte) ## checkbox-02 > A type-safe, accessible checkbox-02 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-02` - **Location**: `/src/lib/components/checkboxes/checkbox-02.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-02.svelte) ## checkbox-03 > A type-safe, accessible checkbox-03 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-03` - **Location**: `/src/lib/components/checkboxes/checkbox-03.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-03.svelte) ## checkbox-04 > A type-safe, accessible checkbox-04 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-04` - **Location**: `/src/lib/components/checkboxes/checkbox-04.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-04.svelte) ## checkbox-05 > A type-safe, accessible checkbox-05 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-05` - **Location**: `/src/lib/components/checkboxes/checkbox-05.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-05.svelte) ## checkbox-06 > A type-safe, accessible checkbox-06 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-06` - **Location**: `/src/lib/components/checkboxes/checkbox-06.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-06.svelte) ## checkbox-07 > A type-safe, accessible checkbox-07 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-07` - **Location**: `/src/lib/components/checkboxes/checkbox-07.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-07.svelte) ## checkbox-08 > A type-safe, accessible checkbox-08 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-08` - **Location**: `/src/lib/components/checkboxes/checkbox-08.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-08.svelte) ## checkbox-09 > A type-safe, accessible checkbox-09 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-09` - **Location**: `/src/lib/components/checkboxes/checkbox-09.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-09.svelte) ## checkbox-10 > A type-safe, accessible checkbox-10 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-10` - **Location**: `/src/lib/components/checkboxes/checkbox-10.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte

You can use this checkbox with a label and a description.

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-10.svelte) ## checkbox-11 > A type-safe, accessible checkbox-11 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-11` - **Location**: `/src/lib/components/checkboxes/checkbox-11.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte

You can use this checkbox with a label and a description.

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-11.svelte) ## checkbox-12 > A type-safe, accessible checkbox-12 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-12` - **Location**: `/src/lib/components/checkboxes/checkbox-12.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte

You can use this checkbox with a label and a description.

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-12.svelte) ## checkbox-13 > A type-safe, accessible checkbox-13 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-13` - **Location**: `/src/lib/components/checkboxes/checkbox-13.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte

A short description goes here.

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-13.svelte) ## checkbox-14 > A type-safe, accessible checkbox-14 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-14` - **Location**: `/src/lib/components/checkboxes/checkbox-14.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte

A short description goes here.

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-14.svelte) ## checkbox-15 > A type-safe, accessible checkbox-15 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-15` - **Location**: `/src/lib/components/checkboxes/checkbox-15.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte

A short description goes here.

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-15.svelte) ## checkbox-16 > A type-safe, accessible checkbox-16 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-16` - **Location**: `/src/lib/components/checkboxes/checkbox-16.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#each items as item (item.id)} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-16.svelte) ## checkbox-17 > A type-safe, accessible checkbox-17 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-17` - **Location**: `/src/lib/components/checkboxes/checkbox-17.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
{#snippet renderNode({ checked, children, id, indeterminate, label, onCheckedChange })}
{#if children} {#each children as child (child.id)}
{@render renderNode(child)}
{/each} {/if} {/snippet}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-17.svelte) ## checkbox-18 > A type-safe, accessible checkbox-18 component for building modern UIs. This component is part of the checkboxes collection. ### Core Information - **Component ID**: `checkbox-18` - **Location**: `/src/lib/components/checkboxes/checkbox-18.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Days of the week
{#each items as item (item.id)} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/checkboxes/checkbox-18.svelte)