LineaUI.Components.Switch (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's switches: solid or outline (plain or filled track), pill or squircle, three sizes, four thumb sizes, in every theme color.

<.switch name="notify" label="Notifications" color="primary" />
<.switch field={@form[:public]} label="Public" variant="outline" color="success" />
<.switch name="dense" size="sm" shape="squircle" thumb_inset={4} checked />
<.switch name="email" label="Email" label_position="left" wrapper_class="w-full justify-between" />

Summary

Functions

switch(assigns)

Renders a switch: a checkbox drawn as a track and thumb. Like checkbox, it sends unchecked_value through a hidden input when off.

Functions

switch(assigns)

Renders a switch: a checkbox drawn as a track and thumb. Like checkbox, it sends unchecked_value through a hidden input when off.

Attributes

  • field (Phoenix.HTML.FormField) - Defaults to nil.
  • id (:string) - Defaults to the field's id.
  • name (:string) - Defaults to the field's name.
  • value (:any)
  • checked (:boolean) - Defaults to whether value (or the field's value) is true.
  • checked_value (:string) - Defaults to "true".
  • unchecked_value (:string) - Defaults to "false".
  • hidden_input (:boolean) - Defaults to true.
  • color (:string) - Defaults to "neutral". Must be one of "neutral", "primary", "secondary", "info", "success", "warning", or "error".
  • variant (:string) - Defaults to "basic". Must be one of "basic", or "outline".
  • filled (:boolean) - A tinted track, for outline. Defaults to false.
  • shape (:string) - Defaults to "pill". Must be one of "pill", or "squircle".
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • thumb_inset (:integer) - Pixels between the thumb and the track edge: the higher, the smaller the thumb. Defaults to 2. Must be one of 2, 3, 4, 5, or 6.
  • label (:string) - The caption. Defaults to nil.
  • label_position (:string) - Which side of the switch the caption sits on. left puts the caption before the switch; add wrapper_class="w-full justify-between" to push them to opposite ends. Defaults to "right". Must be one of "right", or "left".
  • label_class (:any) - Classes of the caption text. Defaults to nil.
  • description (:string) - A smaller grey line under the label. Defaults to nil.
  • errors (:list) - Messages to show; field adds its own once the input was used. Defaults to [].
  • disabled (:boolean) - Defaults to false.
  • wrapper_class (:any) - Classes of the outer block (grid placement, spacing). Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["form", "required"].

Slots

  • inner_block - Label content, instead of label.