Phlex Components
x
1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
  <div data-controller="popover" data-popover-match-width-value="true" data-popover-options-value="{"trigger":"click","duration":[500,0],"placement":"bottom-start"}" class="w-56 flex items-center justify-center"><input type="string" class="h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 border-border focus-visible:ring-ring placeholder:text-muted-foreground hidden" data-controller="input" value="apple" id="select-a-fruit"><button data-popover-target="trigger" type="button" class="w-full flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [& amp;>span]:line-clamp-1"><span data-controller="text" class="pointer-events-none" id="select-a-fruit">Apple</span><svg width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50 shrink-0 ml-2 -mr-1" aria-hidden="true"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><template data-popover-target="content">
      <div data-state="open" data-controller="select" data-select-input-outlet="#select-a-fruit" data-select-text-outlet="#select-a-fruit" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">
        <div>
          <h3 class="px-2 py-1.5 text-sm font-semibold">Fruits</h3>
          <div role="menuitem" class="group/selectitem relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-action="click->popover#close click->select#selectItem" data-popover-target="menuItem" data-select-target="item" data-value="apple" data-orientation="vertical" tabindex="-1">Apple<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="w-4 h-4 absolute right-2 top-1/2 transform -translate-y-1/2 hidden group-data-[selected=true]/selectitem:block"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path></svg></div>
          <div role="menuitem" class="group/selectitem relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-action="click->popover#close click->select#selectItem" data-popover-target="menuItem" data-select-target="item" data-value="orange" data-orientation="vertical" tabindex="-1">Orange<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="w-4 h-4 absolute right-2 top-1/2 transform -translate-y-1/2 hidden group-data-[selected=true]/selectitem:block"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path></svg></div>
          <div role="menuitem" class="group/selectitem relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-action="click->popover#close click->select#selectItem" data-popover-target="menuItem" data-select-target="item" data-value="banana" data-orientation="vertical" tabindex="-1">Banana<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="w-4 h-4 absolute right-2 top-1/2 transform -translate-y-1/2 hidden group-data-[selected=true]/selectitem:block"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path></svg></div>
          <div role="menuitem" class="group/selectitem relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-action="click->popover#close click->select#selectItem" data-popover-target="menuItem" data-select-target="item" data-value="watermelon" data-orientation="vertical" tabindex="-1">Watermelon<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="w-4 h-4 absolute right-2 top-1/2 transform -translate-y-1/2 hidden group-data-[selected=true]/selectitem:block"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path></svg></div>
        </div>
      </div>
    </template></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
render(TestView.new) do
  Select(class: "w-56 flex items-center justify-center") 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

No notes provided.

No params configured.