Checkbox

A checkbox is an interactive element that allows users to select one or more options from a set. It typically appears as a small square box that can be checked (selected) or unchecked (deselected).

Checkboxes are commonly used in forms, settings, and preference panels to enable users to make multiple selections independently.

They provide a clear and straightforward way for users to indicate their choices, and their state (checked or unchecked) is visually distinct, ensuring an intuitive and accessible user experience.

Basic

Figma

🧪 Beta

Guidelines

🛠 In progress

Web

🔭 Alpha

Mobile

🔭 Alpha

Comment

Checkboxes have a bug in Svelte using bind:group

Guidelines

Correct / Incorrect

Takeaways

Features

Usage

Implementation

Checkbox name

<script lang="ts">
  import { Checkbox } from '@behavy/glowup-design-system';

  let selected_list: string = '';
</script>

<Checkbox label="Checkbox name" value="value" {selected_list} />

Properties

Status	Name	Type	Default	Required	Description
🔭	name	string	’checkbox’	❌	The name of the checkbox.
🔭	label	string		❌	The label of the checkbox.
🔭	value	string		✅	The value of the checkbox.
🔭	selected_list	string		✅	The list of the selected checkbox.
🔭	disabled	boolean	false	❌	Disables the checkbox.
🔭	unchecked_icon_url	string		❌	The URL of the unchecked icon.
🔭	height	string	’20px’	❌	The height of the checkbox.
🔭	width	string	’20px’	❌	The width of the checkbox.

Examples

Alternative

Toggle Use a toggle to switch between two states.

Radio Use a radio button to select multiple options from a list.

Select Use a select component to choose an option from a list.

Card

Figma

🧪 Beta

Guidelines

🛠 In progress

Web

🔭 Alpha

Mobile

🔭 Alpha

Guidelines

Correct / Incorrect

Takeaways

Features

Usage

Implementation

<script lang="ts">
  import { CheckboxCard } from '@behavy/glowup-design-system';

  let selected_list: string = '';
</script>

<CheckboxCard label="Checkbox label" value="value" {selected_list} />

Properties

Status	Name	Type	Default	Required	Description
🔭	name	string	’checkbox’	❌	The name of the checkbox.
🔭	label	string		✅	The label of the checkbox.
🔭	value	string		✅	The value of the checkbox.
🔭	selected_list	string		✅	The list of the selected checkbox.
🔭	disabled	boolean	false	❌	Disables the checkbox.
🔭	icon	string		❌	The icon of the checkbox.
🔭	unchecked_icon_url	string		❌	The URL of the unchecked icon.
🔭	variant	boolean	false	❌	The variant of the checkbox.

Examples

Alternative

Toggle Use a toggle card to switch between two states.

Radio Use a radio button card to select multiple options from a list.

Select Use a select component to choose an option from a list.