Flo.w

# Checkbox

<flow-checkbox>
Stable

The checkbox component allows the user to toggle an option on or off.

Checkboxes emit the flowChange when selected or deselected.

# Examples

# Color

Use the color attribute to set the checkbox's color from the application palette. By default, the secondary application color is used to match Material Design guidelines.

# Label Alignment

Use the align attribute to set the position of the checkbox relative to the label.

# Checkbox States

The checked, indeterminate and disabled attributes can be set to control the checkbox state.

# Properties

Property Description Type Default
align The checkbox position relative to its label. "end" | "start" 'start'
checked The checked state of the checkbox. boolean false
color The color of the checkbox. Colors are taken from the application palette. "danger" | "gray" | "primary" | "secondary" | "success" | "warning"
disabled Set to `true` to disable interaction with the checkbox. boolean false
indeterminate Set to `true` to enable the indeterminate checkbox state. boolean false
label If set, specifies the checkbox label text. Otherwise, the text content of the element is used as the label text. string
name The name attribute of the checkbox. string
value The value attribute of the checkbox. string

# Events

Event Description Type
flowBlur

Emitted when the checkbox loses focus.

 any
flowChange

Emitted when the checked state changes.

 any
flowFocus

Emitted when the checkbox gains focus.

 any

# Methods

Method Description
removeFocus removeFocus() => Promise<void>

Remove focus from the checkbox.

setFocus setFocus() => Promise<void>

Set focus on the checkbox.

# Slots

Slot Description
(default) The checkbox label. Alternatively, set using the `label` attribute.

# CSS Custom Properties

Name Description
--color Color of the checkbox. (default: secondary)
--label-color Color of the checkbox label. (default: text)
--tick-color Color of the checkbox tick. (default: secondary contrast)

# CSS Parts

Name Description
label The checkbox label.

← Checkbox Group →