shadcn/phlexcomponents

Select

Displays a list of options for the user to pick from—triggered by a button.

Anatomy

Select do |s|

  s.trigger



  s.content do

    s.group do

      s.label

      s.item

      s.item

    end



    s.item

    s.item

  end

end

API Reference

Select

A dropdown selection component that supports both custom styled and native HTML select modes. Provides keyboard navigation, search functionality, and form integration.

NameTypeDefault
id:stringnil
name:stringnil
value:stringnil
placeholder:stringnil
native:booleanfalse
include_blank:booleanfalse
disabled:booleanfalse
attributeskeyword arguments

Select#trigger

NameType
attributeskeyword arguments

Select#content

NameTypeDefault
side:symbol:bottom
Controls the side of the trigger to position the content. :top | :left | :bottom | :right
align:symbol:center
Controls the alignment the content relative to the trigger. :start | :center | :end
attributeskeyword arguments

Select#group

A container for grouping related select options with optional labels. Provides semantic structure and visual separation.

NameType
attributeskeyword arguments

Select#label

A non-selectable label for option groups. Used within group blocks to provide descriptive headings for grouped options.

NameType
attributeskeyword arguments

Select#item

An individual selectable option within the dropdown. Supports disabled states and automatic selection indicators.

NameTypeDefault
value:stringnil
The value submitted when this option is selected. Required for proper form submission and selection logic.
disabled:booleanfalse
When true, prevents this option from being selected and applies disabled styling.
attributeskeyword arguments

Select#items (Builder)

Builder method for generating select options from a collection.

NameTypeDefault
required collectionarray
An array of objects or hashes for building select options. Each item becomes a selectable option.
required value_method:symbol
Method called on each collection item to get the option value for form submission.
required text_method:symbol
Method called on each collection item to get the display text for the option.
disabled_items:string or arraynil
Values of select items to disable. Can be a single value or array of values matching the value_method results.
attributeskeyword arguments

Keyboard Interactions

KeyDescription
SpaceWhen focus is on trigger, opens the select and focuses the selected item. When focus is on an item, selects the focused item.
EnterWhen focus is on trigger, opens the select and focuses the selected item. When focus is on an item, selects the focused item.
ArrowDownWhen focus is on trigger, opens the select. When focus is on an item, moves focus to the next item.
ArrowUpWhen focus is on trigger, opens the select. When focus is on an item, moves focus to the previous item.
EscCloses the select and moves focus to trigger.

Examples