DevactionUI.Choice (devaction_ui v0.2.3)

Copy Markdown View Source

Boxes to tick and options to pick, as the canvas draws them: the checkbox (with the partial state of "select all"), the radio with its description and the choice card. They are real <input>s, so the browser, the form and the keyboard do the work; the look comes from the checkbox, radio and choice-card classes.

checkbox_group/1 and radio_group/1 are the <fieldset> with its <legend> that name a set of boxes or options, with a help text, an error and the required mark of the group. The radio group is a radiogroup whose arrow keys are the browser's own for radios sharing a name. size={:sm} is the 18px box on a 40px row for dense lists, and variant={:task} on a checkbox is the round 22px tick of a task list, whose text is struck through once it is done.

Summary

Functions

checkbox(assigns)
checkbox_group(assigns)

A <fieldset> with a <legend> around a set of checkboxes, with the help and the error of the group.

choice_card(assigns)

A whole card that is the option: it gains the border and the wash of the choice when ticked.

radio(assigns)
radio_group(assigns)

A radiogroup <fieldset> with a <legend> around radios that share a name; the arrow keys are the browser's.

select_all_state(total, total)

The state of a "select all" box: :none, :some (partial) or :all, from how many of total are ticked.

Functions

checkbox(assigns)

Attributes

  • id (:string) (required)
  • name (:string) - Defaults to nil.
  • value (:string) - Defaults to "true".
  • checked (:boolean) - Defaults to false.
  • partial (:boolean) - the dash of a "select all" with only some ticked; the DevactionUI.Indeterminate hook sets the element's indeterminate so assistive technology hears it too. Defaults to false.
  • label (:string) - Defaults to nil.
  • description (:string) - Defaults to nil.
  • size (:atom) - Defaults to :md. Must be one of :md, or :sm.
  • variant (:atom) - :task is the round tick of a task list; the text is struck through once it is checked. Defaults to :default. Must be one of :default, or :task.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "required", "form", "autofocus"].

checkbox_group(assigns)

A <fieldset> with a <legend> around a set of checkboxes, with the help and the error of the group.

Attributes

  • id (:string) (required)
  • legend (:string) (required) - what the boxes choose, as the group's name.
  • help (:string) - a hint under the boxes, tied to the group. Defaults to nil.
  • error (:string) - what is wrong with the group, as an alert. Defaults to nil.
  • required (:boolean) - marks the legend with an asterisk; put required on the boxes that must be ticked. Defaults to false.
  • orientation (:atom) - Defaults to :vertical. Must be one of :vertical, or :horizontal.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form"].

Slots

  • inner_block (required) - the checkbox/1s of the group.

choice_card(assigns)

A whole card that is the option: it gains the border and the wash of the choice when ticked.

Attributes

  • id (:string) (required)
  • name (:string) (required)
  • value (:string) (required)
  • type (:string) - Defaults to "radio". Must be one of "radio", or "checkbox".
  • checked (:boolean) - Defaults to false.
  • label (:string) (required)
  • description (:string) - Defaults to nil.
  • layout (:atom) - :row puts the mark, the text and the input in a line; :stack puts the mark above the text. Defaults to :row. Must be one of :row, or :stack.
  • invalid (:boolean) - the card is drawn with the border of an error. Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "required", "form", "autofocus"].

Slots

  • icon - a mark at the start of the card.

radio(assigns)

Attributes

  • id (:string) (required)
  • name (:string) (required)
  • value (:string) (required)
  • checked (:boolean) - Defaults to false.
  • label (:string) (required)
  • description (:string) - Defaults to nil.
  • size (:atom) - Defaults to :md. Must be one of :md, or :sm.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "required", "form", "autofocus"].

radio_group(assigns)

A radiogroup <fieldset> with a <legend> around radios that share a name; the arrow keys are the browser's.

Attributes

  • id (:string) (required)
  • legend (:string) (required) - what the options choose, as the group's name.
  • help (:string) - a hint under the options, tied to the group. Defaults to nil.
  • error (:string) - what is wrong with the group, as an alert. Defaults to nil.
  • required (:boolean) - marks the group as required, for assistive technology and with an asterisk. Defaults to false.
  • orientation (:atom) - Defaults to :vertical. Must be one of :vertical, or :horizontal.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form"].

Slots

select_all_state(total, total)

@spec select_all_state(non_neg_integer(), non_neg_integer()) :: :none | :some | :all

The state of a "select all" box: :none, :some (partial) or :all, from how many of total are ticked.