Corex.RadioGroup (Corex v0.1.0-alpha.29)

View Source

Phoenix implementation of Zag.js Radio Group.

Examples

Basic (without indicator)

<.radio_group id="rg" name="choice" items={[["1", "Option A"], ["2", "Option B"]]} class="radio-group">
  <:label>Choose one</:label>
</.radio_group>

With indicator

<.radio_group id="rg" name="choice" items={[["1", "Option A"], ["2", "Option B"]]} class="radio-group">
  <:label>Choose one</:label>
  <:item_control><.icon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>

Items can be a list of {value, label} tuples or a list of maps with :value, :label, and optional :disabled, :invalid. Optional :item_control slot renders the check indicator for each item; when omitted, no indicator is shown.

Styling

Use data attributes to target elements:

[data-scope="radio-group"][data-part="root"] {}
[data-scope="radio-group"][data-part="label"] {}
[data-scope="radio-group"][data-part="indicator"] {}
[data-scope="radio-group"][data-part="item"] {}
[data-scope="radio-group"][data-part="item-text"] {}
[data-scope="radio-group"][data-part="item-control"] {}
[data-scope="radio-group"][data-part="item-hidden-input"] {}

If you wish to use the default Corex styling, you can use the class radio-group on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/radio-group.css";

You can then use modifiers

<.radio_group class="radio-group radio-group--accent radio-group--lg" items={[]}>
</.radio_group>

Learn more about modifiers and Corex Design

Summary

Components

radio_group(assigns)

Components

radio_group(assigns)

Attributes

  • id (:string)
  • value (:string) - Defaults to nil.
  • default_value (:string) - Defaults to nil.
  • controlled (:boolean) - Defaults to false.
  • name (:string) - Defaults to nil.
  • form (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • invalid (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • read_only (:boolean) - Defaults to false.
  • dir (:string) - Defaults to nil.Must be one of nil, "ltr", or "rtl".
  • orientation (:string) - Defaults to "vertical". Must be one of "horizontal", or "vertical".
  • on_value_change (:string) - Defaults to nil.
  • on_value_change_client (:string) - Defaults to nil.
  • items (:list) (required) - List of [value, label] or %{value: ..., label: ..., disabled: ..., invalid: ...}.
  • Global attributes are accepted.

Slots

  • label
  • item_control
  • item