Wishlist Dizzy

Checkbox

New

Overview

Checkbox component to be used for boolean values in forms.

Stores whether product updates are enabled.

HEEx 
<.form for={@form}>
  <div class="grid gap-4">
    <Checkbox.checkbox
      field={@form[:product_updates]}
      label="Product updates"
      sublabel="Recommended"
      description="Stores whether product updates are enabled."
    />
    <Checkbox.checkbox field={@form[:product_tips]} label="Product tips" />
  </div>
</.form>

Checkbox group

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

Tags

Choose every tag that applies.

HEEx 
<.form for={@form}>
  <Checkbox.checkbox_group
    field={@form[:tags]}
    label="Tags"
    description="Choose every tag that applies."
    options={[{"Design", "design"}, {"Engineering", "engineering"}, {"Research", "research"}]}
  />
</.form>

Checkbox errors

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

must be accepted

HEEx 
<.form for={@form}>
  <Checkbox.checkbox field={@form[:terms]} label="Accept the terms" />
</.form>

Checkbox group errors

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

Tags

can't be blank

HEEx 
<.form for={@form}>
  <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
NameTypeDefault 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—
sublabel :string nil—
unchecked_value :string "false"—

Checkbox.checkbox_group

Attributes

Attributes for Checkbox.checkbox_group
NameTypeDefault 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 []—

Explore Dizzy