Class: Shadcn::RadioGroupItemComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/shadcn/radio_group_item_component.rb

Overview

Individual radio button item using native Styled with CSS to match shadcn/ui design Works without JavaScript

Examples:

With label parameter (Tier 2 API)

<%= group.with_item(value: "free", label: "Free") %>

With label and description

<%= group.with_item(value: "pro", label: "Pro", description: "For professional developers") %>

With block content (backward compatible)

<%= group.with_item(value: "free") { "Free" } %>

Without label (for external labels)

<%= group.with_item(value: "free", id: "plan-free") %>

Constant Summary collapse

ITEM_CLASSES =

CSS classes for the native radio input styled as a custom circle

[
  # Reset native appearance
  "appearance-none",
  # Size and shape
  "aspect-square h-4 w-4 shrink-0 rounded-full",
  # Border and colors
  "border border-primary",
  # Ring focus style
  "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
  # Disabled state
  "disabled:cursor-not-allowed disabled:opacity-50",
  # Custom checked indicator using CSS
  "relative",
  # Checked state - show inner circle
  "checked:bg-primary",
  # Transition for smooth state changes
  "transition-colors"
].join(" ")
LABEL_CLASSES = 
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
DESCRIPTION_CLASSES = 
"text-sm text-muted-foreground"

Instance Attribute Summary

Attributes inherited from BaseComponent

#class_name, #data, #html_options

Instance Method Summary collapse

Methods inherited from BaseComponent

#content

Methods included from Shadcn::Rails::Helpers::ClassNameHelper

#cn

Constructor Details

#initialize(value:, id: nil, label: nil, description: nil, disabled: false, group_name: nil, selected: false, **options, &block) ⇒ RadioGroupItemComponent

Returns a new instance of RadioGroupItemComponent.

Parameters:

  • The value for this radio option

  • (defaults to: nil)

    HTML id attribute

  • (defaults to: nil)

    Label text (alternative to block content)

  • (defaults to: nil)

    Description text displayed below the label

  • (defaults to: false)

    Whether this option is disabled

  • (defaults to: nil)

    The name attribute from parent group

  • (defaults to: false)

    Whether this option is selected



51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
# File 'app/components/shadcn/radio_group_item_component.rb', line 51

def initialize(
  value:,
  id: nil,
  label: nil,
  description: nil,
  disabled: false,
  group_name: nil,
  selected: false,
  **options,
  &block
)
  super(**options, &block)
  @value = value
  @id = id || "radio-#{value}"
  @label = label
  @description = description
  @disabled = disabled
  @group_name = group_name
  @selected = selected
end

Instance Method Details

#call ⇒ Object 



72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
# File 'app/components/shadcn/radio_group_item_component.rb', line 72

def call
  label_text = @label || content.presence

  if label_text.present?
    if @description.present?
      # Render with label and description
      render_with_description(label_text)
    else
      # Render with integrated label only
      content_tag(:label, label_wrapper_attributes) do
        safe_join([
          radio_input,
          content_tag(:span, label_text, class: LABEL_CLASSES)
        ])
      end
    end
  else
    # Render just the radio input (for use with external labels)
    radio_input
  end
end