A switch for what takes effect at once, with no save button (for a choice that only counts after saving, use a
checkbox). It is a <button role="switch">: aria-checked says the state, the keyboard toggles it and the
caller does the work in its own phx-click. By default it writes no hidden input, so it does not take part in
a form's submit: the state is the LiveView's, kept by the click. Give it a name (the field mode) and it
renders a hidden input <id>-field with "true" or "false", which the DevactionUI.Switch hook keeps
the same as the button, firing input so the form's phx-change hears it; a press then works with no
phx-click at all. While the change is being kept, saving puts a spinner in the thumb and the control
ignores presses; saved_note/1 is the "saved now" the caller shows after.
Colors: the default ink, :ai (amber) and :ok (green). Sizes: :sm, :md, :lg. The track has a hit
area of 44px high; in switch_row/1 and switch_card/1 the text is a <label>, so pressing it toggles too.
Summary
Functions
The confirmation of a change that was kept, read out by assistive technology without taking focus. Render it always and flip show.
The switch itself, a button that takes the press and says its state.
A card that is the switch: it gets the border and the wash of "on" when the switch is on.
A row of settings: the label and its description on the left, the switch on the right. A disabled row is dimmed whole.
Functions
The confirmation of a change that was kept, read out by assistive technology without taking focus. Render it always and flip show.
Attributes
id(:string) (required)show(:boolean) - whether the band with the text is there; the live region itself always is, so the text is announced when it comes in. Defaults totrue.class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required) - the confirmation, such as "Saved now".icon
The switch itself, a button that takes the press and says its state.
Attributes
id(:string) (required)checked(:boolean) - Defaults tofalse.name(:string) - turns on the field mode: a hidden input of this name carries"true"or"false"in the form. Defaults tonil.size(:atom) - Defaults to:md. Must be one of:sm,:md, or:lg.tone(:atom) - Defaults to:default. Must be one of:default,:ai, or:ok.saving(:boolean) - the change is being kept: a spinner shows in the thumb and presses are ignored. Defaults tofalse.disabled(:boolean) - Defaults tofalse.label(:string) - the accessible name when there is no visible one. Defaults tonil.labelledby(:string) - the id of the text that names it. Defaults tonil.class(:any) - Defaults tonil.- Global attributes are accepted. Supports all globals plus:
["phx-click", "phx-value-id", "phx-value-key", "phx-target"].
Slots
icon- a mark in the thumb, coloured by the tone (a check when on, a cross when off); gets%{checked: boolean}.
A card that is the switch: it gets the border and the wash of "on" when the switch is on.
Attributes
id(:string) (required)checked(:boolean) - Defaults tofalse.name(:string) - the field mode ofswitch/1. Defaults tonil.label(:string) (required)description(:string) - Defaults tonil.tone(:atom) - Defaults to:default. Must be one of:default,:ai, or:ok.saving(:boolean) - Defaults tofalse.disabled(:boolean) - Defaults tofalse.class(:any) - Defaults tonil.- Global attributes are accepted. Supports all globals plus:
["phx-click", "phx-value-id", "phx-value-key", "phx-target"].
Slots
icon- a mark in a 40px badge at the start of the card; it takes the colour of "on".thumb_icon- a mark in the thumb, as theiconofswitch/1.
A row of settings: the label and its description on the left, the switch on the right. A disabled row is dimmed whole.
Attributes
id(:string) (required)checked(:boolean) - Defaults tofalse.name(:string) - the field mode ofswitch/1. Defaults tonil.label(:string) (required)description(:string) - Defaults tonil.tone(:atom) - Defaults to:default. Must be one of:default,:ai, or:ok.saving(:boolean) - Defaults tofalse.disabled(:boolean) - Defaults tofalse.class(:any) - Defaults tonil.- Global attributes are accepted. Supports all globals plus:
["phx-click", "phx-value-id", "phx-value-key", "phx-target"].
Slots
thumb_icon- a mark in the thumb, as theiconofswitch/1.