Select
Displays a list of options for the user to pick from—triggered by a button.
Usage
Select (deconstructed)
Fruits
Apple
Orange
Banana
Watermelon
div(class: 'w-56 flex items-center justify-center') do Select do SelectInput(value: "apple", id: "select-a-fruit") SelectTrigger do SelectValue(placeholder: 'Select a fruit', id: "select-a-fruit") { "Apple" } end SelectContent(outlet_id: "select-a-fruit") do SelectGroup do SelectLabel { "Fruits" } SelectItem(value: "apple") { "Apple" } SelectItem(value: "orange") { "Orange" } SelectItem(value: "banana") { "Banana" } SelectItem(value: "watermelon") { "Watermelon" } end end end end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
Select | Phlex | |
SelectContent | Phlex | |
SelectGroup | Phlex | |
SelectInput | Phlex | |
SelectItem | Phlex | |
SelectLabel | Phlex | |
SelectTrigger | Phlex | |
SelectValue | Phlex |
Component | Built using | Source |
---|---|---|
Select | Phlex | |
SelectContent | Phlex | |
SelectGroup | Phlex | |
SelectInput | Phlex | |
SelectItem | Phlex | |
SelectLabel | Phlex | |
SelectTrigger | Phlex | |
SelectValue | Phlex | |
SelectController | Stimulus JS | |
SelectItemController | Stimulus JS |