← Back

RadioGroup

[intermediate]

Grouped radio buttons with tab switching

RadioGroup Demo

Grouped radio buttons with tab switching

For the full interactive experience:

$ mix raxol.playground

Code
defp render_group({group, gi}, active_group) do
  active? = gi == active_group
  title_style = if active?, do: [:bold], else: [:dim]

  options =
    group.options
    |> Enum.with_index()
    |> Enum.map(&render_option(&1, group.selected, active?))

  column style: %{gap: 0} do
    [text(group.name, style: title_style) | options]
  end
end

defp render_option({opt, oi}, selected, active?) do
  mark = if oi == selected, do: "(o)", else: "( )"
  prefix = if active? and oi == selected, do: "> ", else: "  "
  text("#{prefix}#{mark} #{opt}")
end
demo j/k prev/next / focus demo esc back 10/42 demos