The Checkbox component is a form control that allows users to select one or multiple options from a set.
It is typically represented as a small square box that can be checked or unchecked.

• Multiple selection: Users can select multiple options independently.
• Custom colors: Supports different visual styles using Constants.statusColors or custom colors.
• Disabled state: Prevents user interaction when needed.
• Accessible: Includes proper labels for screen readers.

Usage Example

Preview

checked

disabled

success

warning

error

info

secondary

Code

<script lang="ts">
  import { Checkbox } from "@fefade-ui/svelte"
  import { Constants } from "@fefade-ui/core"

  const colors = [...Constants.statusColors, "secondary"] as const
</script>

<Checkbox label="checked" checked />
<Checkbox label="disabled" disabled />
<br />
{#each colors as color (color)}
  <Checkbox label={color} {color} />
{/each}

Props

Prop	Type	Default	Description
label	string	""	Text label displayed next to the checkbox.
checked	boolean	false	Determines if the checkbox is initially checked.
disabled	boolean	false	Disables user interaction with the checkbox.
color	string	"primary"	Sets the color of the checkbox. Use Constants.statusColors or "secondary".

Best Practices

• Use labels to make checkboxes accessible.
• Avoid using too many checkboxes in a single form for better UX.
• Use consistent colors to indicate status or importance.
• Combine with form validation to ensure required selections are made.