Plushie.Widget.Checkbox (Plushie v0.7.2)

Copy Markdown View Source

Checkbox, toggleable boolean input.

Props

NameTypeDefaultDescription
labelString.t() | atom()nilText label next to the checkbox.
is_toggledboolean()requiredWhether checked.
spacingnumber()nilSpace between checkbox and label in pixels.
width:fill | :shrink | {:fill_portion, pos_integer()} | number()nilWidget width. Default: shrink.
sizenumber()nilCheckbox size in pixels.
text_sizenumber()nilLabel text size in pixels.
font:default | :monospace | String.t() | %Plushie.Type.Font{}nilLabel font.
line_heightnumber() | %{relative: number()} | %{absolute: number()}nilLabel line height.
shaping:basic | :advanced | :autonilText shaping strategy.
wrapping:none | :word | :glyph | :word_or_glyphnilText wrapping mode.

| style | :default \| :primary \| :secondary \| :success \| :danger \| :warning \| :dark \| :weak \| :rounded_box \| term() | nil | Named preset or custom StyleMap. | | icon | map() | nil | Custom icon for the check mark. | | disabled | boolean() | nil | When true, cannot be toggled. | | required | boolean() | nil | Marks the field as required. Flows into a11y.required automatically. | | validation | term() | nil | Form validation state. Accepts :valid, :pending, or {:invalid, message}. Flows into a11y.invalid and a11y.error_message automatically. | | event_rate | integer() | nil | Max events per second for coalescable events. | | a11y | %Plushie.Type.A11y{} \| map() \| keyword() | %{role: :check_box, label_from: :label} | Accessibility annotations. |

Events

EventTypeDescription
:togglevalue: boolean()Emitted when toggled. Value is the new boolean state.

Constructor

Checkbox.new(id, label, is_toggled)
Checkbox.new(id, label, is_toggled, opts)

Summary

Functions

Accessibility annotations.

Converts this widget struct to a ui_node() map.

Creates a :checkbox widget.

When true, cannot be toggled.

Max events per second for coalescable events.

Custom icon for the check mark.

Text label next to the checkbox.

Label line height.

Creates a new widget struct with the given positional args and keyword options.

Marks the field as required. Flows into a11y.required automatically.

Text shaping strategy.

Checkbox size in pixels.

Space between checkbox and label in pixels.

Named preset or custom StyleMap.

Label text size in pixels.

Form validation state. Accepts :valid, :pending, or {:invalid, message}. Flows into a11y.invalid and a11y.error_message automatically.

Widget width. Default: shrink.

Applies keyword options to an existing widget struct.

Text wrapping mode.

Types

option()

@type option() ::
  (((((((((((((({:label, String.t() | atom()} | {:spacing, number()})
               | {:width,
                  :fill | :shrink | {:fill_portion, pos_integer()} | number()})
              | {:size, number()})
             | {:text_size, number()})
            | {:font,
               :default
               | :monospace
               | String.t()
               | %Plushie.Type.Font{
                   family: term(),
                   stretch: term(),
                   style: term(),
                   weight: term()
                 }})
           | {:line_height,
              number() | %{relative: number()} | %{absolute: number()}})
          | {:shaping, :basic | :advanced | :auto})
         | {:wrapping, :none | :word | :glyph | :word_or_glyph})
        | {:style,
           :default
           | :primary
           | :secondary
           | :success
           | :danger
           | :warning
           | :dark
           | :weak
           | :rounded_box
           | term()})
       | {:icon, map()})
      | {:disabled, boolean()})
     | {:required, boolean()})
    | {:validation, term()})
   | {:event_rate, integer()})
  | {:a11y,
     %Plushie.Type.A11y{
       active_descendant: term(),
       busy: term(),
       described_by: term(),
       description: term(),
       disabled: term(),
       error_message: term(),
       expanded: term(),
       has_popup: term(),
       hidden: term(),
       invalid: term(),
       label: term(),
       label_from: term(),
       labelled_by: term(),
       level: term(),
       live: term(),
       mnemonic: term(),
       modal: term(),
       orientation: term(),
       position_in_set: term(),
       radio_group: term(),
       read_only: term(),
       required: term(),
       role: term(),
       selected: term(),
       size_of_set: term(),
       toggled: term(),
       value: term()
     }
     | map()
     | keyword()}

t()

@type t() :: %Plushie.Widget.Checkbox{
  a11y:
    (%Plushie.Type.A11y{
       active_descendant: term(),
       busy: term(),
       described_by: term(),
       description: term(),
       disabled: term(),
       error_message: term(),
       expanded: term(),
       has_popup: term(),
       hidden: term(),
       invalid: term(),
       label: term(),
       label_from: term(),
       labelled_by: term(),
       level: term(),
       live: term(),
       mnemonic: term(),
       modal: term(),
       orientation: term(),
       position_in_set: term(),
       radio_group: term(),
       read_only: term(),
       required: term(),
       role: term(),
       selected: term(),
       size_of_set: term(),
       toggled: term(),
       value: term()
     }
     | map()
     | keyword())
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  disabled:
    boolean()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  event_rate:
    integer()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  font:
    (:default
     | :monospace
     | String.t()
     | %Plushie.Type.Font{
         family: term(),
         stretch: term(),
         style: term(),
         weight: term()
       })
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  icon:
    map()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  id: String.t(),
  is_toggled:
    boolean()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  label:
    (String.t() | atom())
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  line_height:
    (number() | %{relative: number()} | %{absolute: number()})
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  required:
    boolean()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  shaping:
    (:basic | :advanced | :auto)
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  size:
    number()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  spacing:
    number()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  style:
    (:default
     | :primary
     | :secondary
     | :success
     | :danger
     | :warning
     | :dark
     | :weak
     | :rounded_box
     | term())
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  text_size:
    number()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  validation:
    term()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  width:
    (:fill | :shrink | {:fill_portion, pos_integer()} | number())
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  wrapping:
    (:none | :word | :glyph | :word_or_glyph)
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil
}

Functions

a11y(widget, descriptor)

@spec a11y(
  widget :: t(),
  value ::
    (%Plushie.Type.A11y{
       active_descendant: term(),
       busy: term(),
       described_by: term(),
       description: term(),
       disabled: term(),
       error_message: term(),
       expanded: term(),
       has_popup: term(),
       hidden: term(),
       invalid: term(),
       label: term(),
       label_from: term(),
       labelled_by: term(),
       level: term(),
       live: term(),
       mnemonic: term(),
       modal: term(),
       orientation: term(),
       position_in_set: term(),
       radio_group: term(),
       read_only: term(),
       required: term(),
       role: term(),
       selected: term(),
       size_of_set: term(),
       toggled: term(),
       value: term()
     }
     | map()
     | keyword())
    | nil
) :: t()

Accessibility annotations.

Accepts %Plushie.Type.A11y{} | map() | keyword().

build(widget)

@spec build(widget :: t()) :: Plushie.Widget.ui_node()

Converts this widget struct to a ui_node() map.

checkbox(id, opts \\ [])

(macro)

Creates a :checkbox widget.

Shorthand for new/2. Import this macro to use the widget name directly in view functions:

import Plushie.Widget.Checkbox, only: [checkbox: 2]

checkbox("my-id", prop: value)

disabled(widget, descriptor)

@spec disabled(widget :: t(), value :: boolean() | nil) :: t()

When true, cannot be toggled.

Accepts boolean().

event_rate(widget, descriptor)

@spec event_rate(widget :: t(), value :: integer() | nil) :: t()

Max events per second for coalescable events.

Accepts integer().

font(widget, descriptor)

@spec font(
  widget :: t(),
  value ::
    (:default
     | :monospace
     | String.t()
     | %Plushie.Type.Font{
         family: term(),
         stretch: term(),
         style: term(),
         weight: term()
       })
    | nil
) :: t()

Label font.

Accepts :default | :monospace | String.t() | %Plushie.Type.Font{}.

icon(widget, descriptor)

@spec icon(widget :: t(), value :: map() | nil) :: t()

Custom icon for the check mark.

Accepts map().

is_toggled(widget, descriptor)

@spec is_toggled(widget :: t(), value :: boolean() | nil) :: t()

Whether checked.

Accepts boolean().

label(widget, descriptor)

@spec label(widget :: t(), value :: (String.t() | atom()) | nil) :: t()

Text label next to the checkbox.

Accepts String.t() | atom().

line_height(widget, descriptor)

@spec line_height(
  widget :: t(),
  value :: (number() | %{relative: number()} | %{absolute: number()}) | nil
) :: t()

Label line height.

Accepts number() | %{relative: number()} | %{absolute: number()}.

new(id, label, is_toggled, opts \\ [])

Creates a new widget struct with the given positional args and keyword options.

Arguments

  • id - unique widget identifier
  • label - Text label next to the checkbox.
  • is_toggled - Whether checked.
  • opts - keyword list of optional props

required(widget, descriptor)

@spec required(widget :: t(), value :: boolean() | nil) :: t()

Marks the field as required. Flows into a11y.required automatically.

Accepts boolean().

shaping(widget, descriptor)

@spec shaping(widget :: t(), value :: (:basic | :advanced | :auto) | nil) :: t()

Text shaping strategy.

Accepts :basic | :advanced | :auto.

size(widget, descriptor)

@spec size(widget :: t(), value :: number() | nil) :: t()

Checkbox size in pixels.

Accepts number().

spacing(widget, descriptor)

@spec spacing(widget :: t(), value :: number() | nil) :: t()

Space between checkbox and label in pixels.

Accepts number().

style(widget, descriptor)

@spec style(
  widget :: t(),
  value ::
    (:default
     | :primary
     | :secondary
     | :success
     | :danger
     | :warning
     | :dark
     | :weak
     | :rounded_box
     | term())
    | nil
) :: t()

Named preset or custom StyleMap.

Accepts :default | :primary | :secondary | :success | :danger | :warning | :dark | :weak | :rounded_box | term().

text_size(widget, descriptor)

@spec text_size(widget :: t(), value :: number() | nil) :: t()

Label text size in pixels.

Accepts number().

validation(widget, descriptor)

@spec validation(widget :: t(), value :: term() | nil) :: t()

Form validation state. Accepts :valid, :pending, or {:invalid, message}. Flows into a11y.invalid and a11y.error_message automatically.

Accepts term().

width(widget, descriptor)

@spec width(
  widget :: t(),
  value :: (:fill | :shrink | {:fill_portion, pos_integer()} | number()) | nil
) ::
  t()

Widget width. Default: shrink.

Accepts :fill | :shrink | {:fill_portion, pos_integer()} | number().

with_options(widget, opts)

@spec with_options(widget :: t(), opts :: [option()]) :: t()

Applies keyword options to an existing widget struct.

wrapping(widget, descriptor)

@spec wrapping(
  widget :: t(),
  value :: (:none | :word | :glyph | :word_or_glyph) | nil
) :: t()

Text wrapping mode.

Accepts :none | :word | :glyph | :word_or_glyph.