LineaUI.Components.Radio (linea_ui v0.3.0)

Copy Markdown View Source

LineOne's radios, in a group that shares one name: basic or outline, plain or filled box, circle or squircle, in every theme color.

<.radio_group field={@form[:plan]} options={[{"Free", "free"}, {"Pro", "pro"}]} color="primary" />

<.radio_group name="basic" value="primary" class="grid grid-cols-2 gap-6 sm:grid-cols-3">
  <:radio value="default">Default</:radio>
  <:radio value="primary" color="primary">Primary</:radio>
  <:radio value="error" color="error" disabled>Error</:radio>
</.radio_group>

variant="card" lays each option out as a bordered card (title, description, optional icon and count) that rings in color when chosen; variant="chip" renders pill chips, the status filter of a list, with an optional count. Both keep a real radio underneath, so the arrow keys, the form and phx-change work as with plain radios.

<.radio_group field={@form[:status]} variant="chip" color="primary" options={[
  %{label: "Todos", value: "all", count: 128},
  %{label: "Rascunho", value: "draft", count: 4},
  %{label: "Confirmado", value: "confirmed", count: 12}
]} />

<.radio_group field={@form[:remember]} variant="card" color="primary">
  <:radio value="yes" description="Stay signed in for 30 days" icon="huge-laptop">This device</:radio>
  <:radio value="no" description="Sign out when the browser closes">Just this time</:radio>
</.radio_group>

Summary

Functions

radio_group(assigns)

Renders a set of radios. Options are {label, value} tuples, plain values, maps with :label, :value and optionally :description, :count, :icon, :color, :disabled, or :radio slots, which may override color, disabled, description, count and icon one by one.

Functions

radio_group(assigns)

Renders a set of radios. Options are {label, value} tuples, plain values, maps with :label, :value and optionally :description, :count, :icon, :color, :disabled, or :radio slots, which may override color, disabled, description, count and icon one by one.

variant picks the look: basic and outline are LineOne's radios, card a bordered card per option, chip a pill per option. Choosing one fires the form's phx-change like any radio; on its own (outside a form) put phx-click or phx-change in rest.

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) - The value of the checked radio.
  • options (:list) - Defaults to [].
  • color (:string) - Defaults to "neutral". Must be one of "neutral", "primary", "secondary", "info", "success", "warning", or "error".
  • variant (:string) - basic/outline radios, card cards, chip pill chips. Defaults to "basic". Must be one of "basic", "outline", "card", or "chip".
  • filled (:boolean) - Defaults to false.
  • shape (:string) - Defaults to "circle". Must be one of "circle", or "squircle".
  • size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", or "lg".
  • label (:string) - The caption. Defaults to nil.
  • label_class (:any) - Classes of the caption text. Defaults to nil.
  • help (:string) - The small line under the control. 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.
  • radio_class (:any) - Extra classes of every radio input. Defaults to nil.
  • class (:any) - Classes of the container that lays the radios out. Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["form", "required"].

Slots

  • radio - Accepts attributes:
    • value (:any) (required)
    • label (:string)
    • color (:string)
    • disabled (:boolean)
    • description (:string)
    • count (:any) - A number shown in a small badge (chip and card).
    • icon (:string) - A huge-* icon name, shown in a card or a chip.
    • class (:any)