Density

Select

Select composes Base UI’s select primitives with Density button attributes on the trigger and items.

import { Select } from "density-base-ui";

export default function SelectExample() {
  return (
    <Select.Root defaultValue="weekly">
      <Select.Trigger aria-label="Report cadence">
        <Select.Value />
        <Select.Icon>v</Select.Icon>
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner>
          <Select.Popup>
            <Select.List>
              <Select.Item value="daily">
                <Select.ItemIndicator>Selected</Select.ItemIndicator>
                <Select.ItemText>Daily</Select.ItemText>
              </Select.Item>
              <Select.Item value="weekly">
                <Select.ItemIndicator>Selected</Select.ItemIndicator>
                <Select.ItemText>Weekly</Select.ItemText>
              </Select.Item>
              <Select.Item value="monthly">
                <Select.ItemIndicator>Selected</Select.ItemIndicator>
                <Select.ItemText>Monthly</Select.ItemText>
              </Select.Item>
            </Select.List>
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  );
}

Props

Prop Attribute Values Default
Select.Trigger density-presentation data-dn-presentation button button
Select.Trigger density-emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
Select.Trigger density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Select.Item density-presentation data-dn-presentation button button
Select.Item density-emphasis data-dn-emphasis primary, secondary, outline, ghost ghost
Select.Item density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Other Select parts Mixed Base UI select props None