Radio Button
A control that allows users to make a single selection from a list of options.
Usage
Example
div(class: "flex items-center space-x-2") do RadioButton(id: "default") FormFieldLabel(for: "default") { "Default" } end
Copied!
Copy failed!
Checked
div(class: "flex items-center space-x-2") do RadioButton(id: "checked", checked: true) FormFieldLabel(for: "checked") { "Checked" } end
Copied!
Copy failed!
Disabled
div(class: "flex flex-row items-center gap-2") do RadioButton(class: "peer",id: "disabled", disabled: true) FormFieldLabel(for: "disabled") { "Disabled" } end
Copied!
Copy failed!
Aria disabled
div(class: "flex flex-row items-center gap-2") do RadioButton(class: "peer", id: "aria-disabled", aria: {disabled: "true"}) FormFieldLabel(for: "aria-disabled") { "Aria Disabled" } end
Copied!
Copy failed!
Installation
Using RubyUI CLI
Run the install command
rails g ruby_ui:component RadioButton
Copied!
Copy failed!
Manual installation
1
Add RubyUI::RadioButton
to app/components/ruby_ui/radio_button/radio_button.rb
# frozen_string_literal: true module RubyUI class RadioButton < Base def view_template input(**attrs) end private def default_attrs { type: "radio", data: { ruby_ui__form_field_target: "input", action: "change->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid" }, class: [ "h-4 w-4 p-0 border-primary rounded-full flex-none", "disabled:cursor-not-allowed disabled:opacity-50", "checked:bg-primary checked:text-primary-foreground", "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" ] } end end end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
RadioButton | Phlex |