Radio Fields(ui_radio_fields)Bootstrap Logo

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]
  • html_options[hash]<default: {}>
  • 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:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • inline[boolean]
  • label[string]
  • label_html[hash]Html options for the label
  • state[symbol](:disabled, :active)(use component state method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • value[boolean/string/integer]
  • wrapper_html[hash]Html options for the wrapper

Examples

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

Radio

ui_radio_field :custom_radio

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

Inline

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

<div class="form-check form-check-inline">
  <input type="radio" name="inline-radio" id="inline-radio_radio-0" value="radio-0" class="form-check-input" checked="checked">
  <label class="form-check-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 form-check">
  <input type="radio" name="state" id="state_true" value="true" disabled="disabled" class="form-check-input">
  <label class="form-check-label" for="state_true">choice 1</label>
</div>
<div class="disabled form-check">
  <input type="radio" name="state" id="state_false" value="false" disabled="disabled" class="form-check-input" checked="checked">
  <label class="form-check-label" for="state_false">choice 2</label>
</div>

Status

The status option has following symbols for argument:
  • :primary
  • :secondary
  • :success
  • :danger
  • :warning
  • :info
  • :light
  • :dark
ui_radio_field :primary, checked: true, inline: true, status: :primary
ui_radio_field :secondary, checked: true, inline: true, status: :secondary
ui_radio_field :success, checked: true, inline: true, status: :success
ui_radio_field :danger, checked: true, inline: true, status: :danger
ui_radio_field :warning, checked: true, inline: true, status: :warning
ui_radio_field :info, checked: true, inline: true, status: :info
ui_radio_field :light, checked: true, inline: true, status: :light
ui_radio_field :dark, checked: true, inline: true, status: :dark

<div class="form-check-input-primary form-check form-check-inline">
  <input type="radio" name="primary" id="primary_" class="form-check-input form-check-input-primary" checked="checked">
  <label class="form-check-label" for="primary_">primary</label>
</div>
<div class="form-check-input-secondary form-check form-check-inline">
  <input type="radio" name="secondary" id="secondary_" class="form-check-input form-check-input-secondary" checked="checked">
  <label class="form-check-label" for="secondary_">secondary</label>
</div>
<div class="form-check-input-success form-check form-check-inline">
  <input type="radio" name="success" id="success_" class="form-check-input form-check-input-success" checked="checked">
  <label class="form-check-label" for="success_">success</label>
</div>
<div class="form-check-input-danger form-check form-check-inline">
  <input type="radio" name="danger" id="danger_" class="form-check-input form-check-input-danger" checked="checked">
  <label class="form-check-label" for="danger_">danger</label>
</div>
<div class="form-check-input-warning form-check form-check-inline">
  <input type="radio" name="warning" id="warning_" class="form-check-input form-check-input-warning" checked="checked">
  <label class="form-check-label" for="warning_">warning</label>
</div>
<div class="form-check-input-info form-check form-check-inline">
  <input type="radio" name="info" id="info_" class="form-check-input form-check-input-info" checked="checked">
  <label class="form-check-label" for="info_">info</label>
</div>
<div class="form-check-input-light form-check form-check-inline">
  <input type="radio" name="light" id="light_" class="form-check-input form-check-input-light" checked="checked">
  <label class="form-check-label" for="light_">light</label>
</div>
<div class="form-check-input-dark form-check form-check-inline">
  <input type="radio" name="dark" id="dark_" class="form-check-input form-check-input-dark" checked="checked">
  <label class="form-check-label" for="dark_">dark</label>
</div>

Label

ui_radio_field :radio, label: 'My label'

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

Wrapper_html & Label_html

ui_radio_field :radio, wrapper_html: { title: 'My title'}, label_html: { class: 'test' }

<div title="My title" class="form-check">
  <input type="radio" name="radio" id="radio_" class="form-check-input">
  <label class="form-check-label test" for="check">check</label>
</div>

Simple form

Ui Bibz is compatible with simple form. You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz like ui_radio_field. You can use Simple Form input options and Ui Bibz ui_radio_field options.

ui_bibz_form_for(@user) do |f|
  ...
  f.input :name, as: :ui_radio_field, label: "Radio 1", input_html: { checked: true, id: 'radio_1' }
  f.input :name, as: :ui_radio_field, label: "Radio 2", input_html: { id: 'radio_2' }
  ...
end