CustomizableRadioButton

Info Generate Packages

The given code defines a Ruby class named `RadioComponent` which inherits from `ApplicationComponent`. This class is designed to generate HTML content for a user interface, specifically for a radio button component. Inside the `template` method, it constructs HTML elements using a DSL (Domain Specific Language) for defining the component's structure and appearance. The component comprises a div element with a class 'form-control' that contains a label element. This label has a class 'label cursor-pointer' for styling and includes a span element for the label text 'Red pill', and an input element of type 'radio'. The radio button is styled with classes 'radio' and 'checked:bg-red-500', indicating it will have a specific background color when checked. The radio button is also pre-checked by default, as indicated by the 'checked: true' attribute. Additionally, the initial comment suggests that the RadioComponent can be easily customized in terms of color (with predefined options like 'radio-primary', 'radio-secondary', etc.) and size ('radio-lg', 'radio-md', 'radio-sm', 'radio-xs').

# frozen_string_literal: true

# Radio component can be modified:
# color: radio-primary, radio-secondary, radio-accent, radio-success, radio-warning, radio-info, radio-error
# size: radio-lg, radio-md, radio-sm, radio-xs
class RadioComponent < ApplicationComponent
  def template
    div(class: "form-control") do
      label(class: "label cursor-pointer") do
        span(class: "label-text") { "Red pill" }
        input(type: "radio", name: "radio-10", class: "radio checked:bg-red-500", checked: true)
      end
    end
  end
end

Try a prompt