Form Controls
Checkboxes, checkbox groups, and custom select dropdowns for form interactions.
Checkbox - Basic
Simple checkboxes with label and hint text.
We'll send you weekly updates
You can unsubscribe at any time
<%= bui_checkbox("newsletter",
label: "Subscribe to newsletter",
hint: "We'll send you weekly updates") %>
<%= bui_checkbox("terms",
label: "I agree to the terms and conditions") %>Checkbox - Variants
Color variants for semantic meaning.
<%= bui_checkbox("field", label: "Primary", variant: :primary, checked: true) %>
<%= bui_checkbox("field", label: "Success", variant: :success, checked: true) %>
<%= bui_checkbox("field", label: "Danger", variant: :danger, checked: true) %>
<%= bui_checkbox("field", label: "Warning", variant: :warning, checked: true) %>
<%= bui_checkbox("field", label: "Info", variant: :info, checked: true) %>Checkbox - Sizes
Five size variants from extra-small to extra-large.
<%= bui_checkbox("field", label: "Extra Small", size: :xs) %>
<%= bui_checkbox("field", label: "Small", size: :sm) %>
<%= bui_checkbox("field", label: "Medium (default)", size: :md) %>
<%= bui_checkbox("field", label: "Large", size: :lg) %>
<%= bui_checkbox("field", label: "Extra Large", size: :xl) %>Checkbox - Label Position
Labels can be placed on the left or right of the checkbox.
<%= bui_checkbox("field", label: "Label on the right", label_position: :right) %>
<%= bui_checkbox("field", label: "Label on the left", label_position: :left) %>Checkbox - States
Checked, disabled, and error states.
You must accept the terms
<%= bui_checkbox("field", label: "Checked", variant: :success, checked: true) %>
<%= bui_checkbox("field", label: "Disabled", disabled: true) %>
<%= bui_checkbox("field", label: "Disabled + checked", disabled: true, checked: true) %>
<%= bui_checkbox("field", label: "With error", errors: ["You must accept the terms"]) %>Checkbox Group - Basic
Group multiple checkboxes under a common legend with simple string values.
<%= bui_checkbox_group("roles",
["Admin", "Editor", "Viewer"],
legend: "User Roles",
variant: :primary,
selected: ["Admin"]) %>Checkbox Group - Label/Value Pairs
Use [label, value] arrays for separate display text and submitted values.
<%= bui_checkbox_group("permissions",
[["Read Access", "read"], ["Write Access", "write"],
["Delete Access", "delete"], ["Admin Access", "admin"]],
legend: "Permissions",
variant: :success,
selected: ["read", "write"],
hint: "Select the permissions to grant") %>Checkbox Group - Orientation
Vertical (default) and horizontal layouts.
<%= bui_checkbox_group("colors",
["Red", "Green", "Blue", "Yellow"],
legend: "Vertical (default)",
orientation: :vertical) %>
<%= bui_checkbox_group("colors",
["Red", "Green", "Blue", "Yellow"],
legend: "Horizontal",
orientation: :horizontal) %>Select - Basic
Custom dropdown select with keyboard navigation and ARIA support.
Pre-selected value
<%= bui_select("country",
[["Italy", "it"], ["France", "fr"], ["Germany", "de"], ["Spain", "es"]],
label: "Country",
placeholder: "Select a country...") %>
<%= bui_select("role",
[["Administrator", "admin"], ["Editor", "editor"], ["Viewer", "viewer"]],
label: "Role",
value: "editor") %>Select - Features
Clearable selections, prefix icons, disabled and error states.
Click the X to clear the selection
Please select an option
<%= bui_select("country", [...], label: "Clearable",
value: "fr", clearable: true) %>
<%= bui_select("category", [...], label: "With Icon") do |select| %>
<% select.with_prefix_icon do %>
<svg class="w-5 h-5 text-grayscale-400" ...>...</svg>
<% end %>
<% end %>
<%= bui_select("field", [...], label: "Disabled", disabled: true) %>
<%= bui_select("field", [...], label: "With Errors",
required: true, errors: ["Please select an option"]) %>