Choice group(ui_choice_group)

UiBibz::Ui::Core::Forms::Choices::ChoiceGroup

Allow use checkbox or radio inputs throught button element.

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: {}>

ui_choice_group do |bc|
  # by variable
  bc.choice content, options, html_options
  # or by block
  bc.choice options, html_options do
    content
  end
end

Options

The specific options for this component are:
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • size[symbol](:lg, :md, :sm)(use component size method)
  • type[symbol](:radio, :checkbox)
  • outline[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.

Checkbox buttons

ui_choice_group do |bc|
  bc.choice "Checkbox 1"
  bc.choice "Checkbox 2", state: :active
end

<div data-toggle="buttons" class="btn-group btn-group-toggle" >
  <label class="btn-secondary btn"><input type="checkbox" autocomplete="off">Checkbox 1</label>
  <label class="active btn-secondary btn"><input type="checkbox" autocomplete="off" checked="checked">Checkbox 2</label>
</div>

Button choice blocks

Button choice has on block type:

Checkbox buttons options

ui_choice_group size: :sm, outline: true, status: :success do |bc|
  bc.choice "Checkbox 1"
  bc.choice "Checkbox 2", state: :active, glyph: "gem"
end

<div data-toggle="buttons" class="btn-group btn-group-sm button-choice btn-group-toggle">
  <label class="btn-outline-success btn btn-sm checkbox">
    <input type="checkbox" autocomplete="off">Checkbox 1
  </label>
  <label class="active btn-outline-success btn btn-sm checkbox" aria-pressed="true">
    <input type="checkbox" autocomplete="off" checked="checked">
      <i class="glyph fa fa-gem"></i>Checkbox 2
  </label>
</div>

Radio button

ui_choice_group do |bc|
  bc.choice "Radio 1"
  bc.choice "Radio 2", state: :active
end

<div data-toggle="buttons" class="btn-group btn-group-toggle" role="group">
  <label class="btn-primary btn"><input type="radio" autocomplete="off">Radio 1</label>
  <label class="active btn-primary btn"><input type="radio" autocomplete="off" checked="checked">Radio 2</label>
</div>

Radio buttons options

ui_choice_group size: :lg, outline: true, type: :radio do |bc|
  bc.choice "Radio 1", status: :danger, glyph: "gem"
  bc.choice "Radio 2", status: :danger, state: :active
end

<div data-toggle="buttons" class="btn-group btn-group-toggle" role="group">
  <label class="btn-danger-outline btn btn-lg"><input type="radio" autocomplete="off">Radio 1</label>
  <label class="active btn-danger-outline btn btn-lg"><input type="radio" autocomplete="off" checked="checked">Radio 2</label>
</div>

Radio buttons options

ui_choice_group size: :lg, status: :primary, outline: true, type: :radio do |bc|
  bc.choice "Radio 1", glyph: "gem", state: :active, text: false
  bc.choice "Radio 2", status: :danger
  bc.choice "Radio 3"
  bc.choice "Radio 4", status: :danger
end

<div data-toggle="buttons" class="btn-group btn-group-toggle" role="group">
  <label class="btn-danger-outline btn btn-lg"><input type="radio" autocomplete="off">Radio 1</label>
  <label class="active btn-danger-outline btn btn-lg"><input type="radio" autocomplete="off" checked="checked">Radio 2</label>
</div>

Contents