Class: Shadcn::NativeSelectComponent

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

Overview

Native Select component for styled native HTML selects Matches shadcn/ui Native Select component

Examples:

Basic select

<%= render Shadcn::NativeSelectComponent.new(name: "country") do |select| %>
  <% select.with_option(value: "", disabled: true, selected: true) { "Select a country" } %>
  <% select.with_option(value: "us") { "United States" } %>
  <% select.with_option(value: "uk") { "United Kingdom" } %>
  <% select.with_option(value: "ca") { "Canada" } %>
<% end %>

With optgroups

<%= render Shadcn::NativeSelectComponent.new(name: "car") do |select| %>
  <% select.with_optgroup(label: "Swedish Cars") do |group| %>
    <% group.with_option(value: "volvo") { "Volvo" } %>
    <% group.with_option(value: "saab") { "Saab" } %>
  <% end %>
  <% select.with_optgroup(label: "German Cars") do |group| %>
    <% group.with_option(value: "mercedes") { "Mercedes" } %>
    <% group.with_option(value: "audi") { "Audi" } %>
  <% end %>
<% end %>

Disabled

<%= render Shadcn::NativeSelectComponent.new(name: "status", disabled: true) do |select| %>
  <% select.with_option(value: "active") { "Active" } %>
<% end %>

Defined Under Namespace

Classes: OptgroupComponent, OptionComponent

Constant Summary collapse

WRAPPER_CLASSES =

Select wrapper classes for positioning the chevron icon

"relative"
SELECT_CLASSES =

Native select element classes

"h-9 w-full cursor-pointer appearance-none rounded-md border border-input bg-transparent pl-3 pr-8 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
CHEVRON_CLASSES =

Chevron icon classes (positioned absolutely)

"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 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 Rails::Helpers::ClassNameHelper

#cn

Constructor Details

#initialize(name: nil, id: nil, disabled: false, required: false, **options) ⇒ NativeSelectComponent

Returns a new instance of NativeSelectComponent.

Parameters:

  • name (String, nil) (defaults to: nil) —

    Select name attribute

  • id (String, nil) (defaults to: nil) —

    Select ID attribute

  • disabled (Boolean) (defaults to: false) —

    Whether the select is disabled

  • required (Boolean) (defaults to: false) —

    Whether the select is required



52
53
54
55
56
57
58
 
# File 'app/components/shadcn/native_select_component.rb', line 52

def initialize(name: nil, id: nil, disabled: false, required: false, **options)
  super(**options)
  @name = name
  @id = id
  @disabled = disabled
  @required = required
end