Radio Fields(ui_radio_fields)

UiBibz::Ui::Core::Forms::Choices::RadioField

Custom Radio Buttons for form.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • options[hash]<default: {}>
  • html_options[hash]<default: {}>

 # by variable 
 ui_radio_field name, options, html_options 

 # or by block 
 ui_radio_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • state[symbol](:disabled, :active)(use component state method)
  • value[boolean/string/integer]
  • label[string]
  • inline[boolean]
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • action[string](use component stimulus-options method)
  • target[string](use component stimulus-options method)

Examples

Some examples explain how to use the options present in the component.

Radio

ui_radio_field :custom_radio

<div class="custom-control custom-radio">
  <input type="radio" name="custom_radio" id="custom_radio_" class="custom-control-input">
  <label class="custom-control-label" for="custom_radio_">custom_radio</label>
</div>

Inline

ui_radio_field "inline-radio", value: 'Radio 1', inline: true

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" name="inline-radio" id="inline-radio_radio-0" value="radio-0" class="custom-control-input" checked="checked">
  <label class="custom-control-label" for="inline-radio_radio-0">Radio 0</label>
</div>

State

ui_radio_field :state, value: true, state: :disabled, label: "active"
ui_radio_field :state, value: false, state: :disabled, label: "disabled", checked: true

<div class="disabled custom-control custom-radio">
  <input type="radio" name="state" id="state_true" value="true" disabled="disabled" class="custom-control-input">
  <label class="custom-control-label" for="state_true">choice 1</label>
</div>
<div class="disabled custom-control custom-radio">
  <input type="radio" name="state" id="state_false" value="false" disabled="disabled" class="custom-control-input" checked="checked">
  <label class="custom-control-label" for="state_false">choice 2</label>
</div>

Label

ui_radio_field :radio, label: 'My label'

<div class="custom-control custom-radio">
  <input type="radio" name="radio" id="radio_" class="custom-control-input">
  <label class="custom-control-label" for="radio_">My label</label>
</div>

Contents