Select

Native select controls and picker triggers.

Default

<select class="<%= select_class %>" aria-label="Access">
  <option>Private</option>
  <option>Team</option>
  <option>Public</option>
</select>

Small

<select class="<%= select_class(size: :sm) %>" aria-label="Access">
  <option>Private</option>
  <option>Team</option>
  <option>Public</option>
</select>

Large

<select class="<%= select_class(size: :lg) %>" aria-label="Access">
  <option>Private</option>
  <option>Team</option>
  <option>Public</option>
</select>

Example 4

<button type="button" class="<%= dropdown_trigger_class %>" aria-haspopup="listbox">
  <span>Category</span>
  <%= heroicon "chevron-down", variant: :mini, options: { class: "caret size-5", "aria-hidden": "true" } %>
</button>

API reference

dropdown_trigger_class

dropdown_trigger_class(size: :base, extra: nil)

Parameter	Default	Values
size	:base	:sm · :base · :lg
extra	nil	Additional Tailwind classes

select_class

select_class(size: :base, extra: nil)

Parameter	Default	Values
size	:base	:sm · :base · :lg
extra	nil	Additional Tailwind classes