Choice group(ui_choice_group)Bootstrap Logo

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]
  • html_options[hash]<default: {}>
  • 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:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • outline[boolean]
  • size[symbol](:lg, :md, :sm)(use component size method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • type[symbol](:radio, :checkbox)<default: checkbox>

Items

The allowed items for this component are:
  • choice
  • html[html/string]Insert html as a component

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-bs-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-bs-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 type: :radio do |bc|
  bc.choice "Radio 1"
  bc.choice "Radio 2"
end

<div data-bs-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
end

<div data-bs-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-bs-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>

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_choice_field. You can use Simple Form input options and Ui Bibz ui_choice_field options.


ui_bibz_form_for(@user) do |f|
  ...
  f.ui_choice_group do |cg|
    cg.input :active, as: :ui_choice_field
    cg.input :active, as: :ui_choice_field, label: "Checkbox 2"
  end
  f.ui_choice_group type: :radio do |cg|
    cg.input :active, as: :ui_choice_field, label: "Radio 1"
    cg.input :active, as: :ui_choice_field, label: "Radio 2"
  end
  ...
end