Docs

Checkbox

Select multiple options from a list of choices.

<.checkbox field={f[:elixir]} label="Elixir" value="elixir" />

Checkbox Group

Create a set of related checkboxes linked to a single backend field.

Select your favorite languages 

<.checkbox_group field={f[:languages]} label="Languages" description="Select your favorite languages">
  <:checkbox label="Elixir" value="elixir" />
  <:checkbox label="Clojure" value="clojure" />
  <:checkbox label="Haskell" value="haskell" />
</.checkbox_group>

Description

Add context below labels and above checkboxes for additional guidance.

Concurrent, fault-tolerant language.

Functional language for the JVM.

Purely functional, statically typed language. 

<.form :let={f} for={%{}}>
  <.checkbox
    field={f[:elixir]}
    checked
    label="Elixir"
    value="elixir"
    description="Concurrent, fault-tolerant language."
  />
  <.checkbox
    field={f[:clojure]}
    checked
    label="Clojure"
    value="clojure"
    description="Functional language for the JVM."
  />
  <.checkbox
    field={f[:haskell]}
    label="Haskell"
    value="haskell"
    description="Purely functional, statically typed language."
  />
</.form>

Sublabel

Include sublabels with checkbox labels for supplementary information.

Concurrent functional programming
Functional JVM language
Purely functional language 
<.form :let={f} for={%{}}>
  <.checkbox field={f[:elixir]} label="Elixir" value="elixir" sublabel="Concurrent functional programming" />
  <.checkbox field={f[:clojure]} label="Clojure" value="clojure" sublabel="Functional JVM language" />
  <.checkbox field={f[:haskell]} label="Haskell" value="haskell" sublabel="Purely functional language" />
</.form>

Disabled

Show checkboxes in a disabled state for unavailable options.

Concurrent, fault-tolerant language.

High-performance, compiled language. 

<.form :let={f} for={%{}}>
  <.checkbox
    type="checkbox"
    checked
    disabled
    field={f[:elixir]}
    label="Elixir"
    value="elixir"
    description="Concurrent, fault-tolerant language."
  />
  <.checkbox
    type="checkbox"
    disabled
    field={f[:cpp]}
    label="C++"
    value="c++"
    description="High-performance, compiled language."
  />
</.form>

Error

Display validation feedback for checkboxes with error states.

Web framework for Elixir
Web framework for Ruby

At least 500 cores is required

React framework for production 
<.form
  :let={f}
  for={
    to_form(%{"ruby_on_rails" => "true", "nextjs" => "true"},
      errors: [
        ruby_on_rails: {"At least 500 cores is required", []},
        nextjs: {"At least 2GB needed for the bundle is required", []}
      ]
    )
  }
>
  <.checkbox field={f[:phoenix]} label="Phoenix" sublabel="Web framework for Elixir" />
  <.checkbox field={f[:ruby_on_rails]} label="Ruby on Rails" sublabel="Web framework for Ruby"/>
  <.checkbox field={f[:nextjs]} label="Next.js" sublabel="React framework for production" />
</.form>

Customization

Style checkboxes to fit your design while maintaining functionality.

<!-- color: text-red-600 -->
<.checkbox name="elixir" label="Elixir" value="elixir" class="text-red-600" checked />

<!-- size: size-5 -->
<.checkbox name="haskell" label="Haskell" value="haskell" class="size-5" />