Checkbox

New

Overview

Checkbox component to be used for boolean values in forms.

Product updates Stores whether product updates are enabled.

Product tips

HEEx

<div class="stack grid gap-4.25">
  <Checkbox.checkbox
    id="example-updates"
    checked
    label="Product updates"
    description="Stores whether product updates are enabled."
  />
  <Checkbox.checkbox id="example-marketing" label="Product tips" />
</div>

Checkbox group

A checkbox group for selecting multiple values from one field, such as tags.

Checkbox errors

When bound with field, validation errors render beneath the checkbox.

HEEx

<.form
  :let={form}
  for={to_form(%{"terms" => false}, errors: [terms: {"must be accepted", []}])}
  id="example-checkbox-errors-form"
  class="stack w-full"
>
  <Checkbox.checkbox field={form[:terms]} label="Accept the terms" />
</.form>

Checkbox group errors

When bound with field, validation errors render beneath the checkbox group.

HEEx

<.form
  :let={form}
  for={to_form(%{"tags" => []}, errors: [tags: {"can't be blank", []}])}
  id="example-checkbox-group-errors-form"
  class="w-full"
>
  <Checkbox.checkbox_group
    field={form[:tags]}
    label="Tags"
    options={[{"Design", "design"}, {"Engineering", "engineering"}, {"Research", "research"}]}
  />
</.form>

Add this module

terminal

mix dizzy.add checkbox

Component API

Checkbox.checkbox

Attributes

Attributes for Checkbox.checkbox
Name	Type	Default	Values
`checked`	`:boolean`	false	—
`checked_value`	`:string`	"true"	—
`class`	`:any`	nil	—
`description`	`:string`	nil	—
`disabled`	`:boolean`	false	—
`errors`	`:list`	[]	—
`field`	`{:struct, Phoenix.HTML.FormField}`	nil	—
`id`	`:string`	nil	—
`label`	`:string`	nil	—
`name`	`:string`	nil	—
`required`	`:boolean`	false	—
`rest`	`:global`	nil	—
`unchecked_value`	`:string`	"false"	—

Checkbox.checkbox_group

Attributes

Attributes for Checkbox.checkbox_group
Name	Type	Default	Values
`class`	`:any`	nil	—
`description`	`:string`	nil	—
`disabled`	`:boolean`	false	—
`errors`	`:list`	[]	—
`field`	`{:struct, Phoenix.HTML.FormField}`	nil	—
`id`	`:string`	nil	—
`label`	`:string`	nil	—
`name`	`:string`	nil	—
`options`	`:list`	Required	—
`required`	`:boolean`	false	—
`rest`	`:global`	nil	—
`value`	`:list`	[]	—