Select

Select renders Base UI’s select primitives from one items prop.

Report cadence

Sets the default schedule for generated reports.

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

export default function SelectExample() {
  const [value, setValue] = useState("weekly");
  const updateValue = (nextValue: unknown) => {
    if (typeof nextValue === "string") {
      setValue(nextValue);
    }
  };

  return (
    <Select
      value={value}
      onValueChange={updateValue}
      hint="Sets the default schedule for generated reports."
      label="Report cadence"
      items={[
        { value: "daily", label: "Daily" },
        { value: "weekly", label: "Weekly" },
        { value: "monthly", label: "Monthly" },
      ]}
    />
  );
}

Props

Prop	Attribute	Values	Default
`items`	None	`{ value, label, disabled? }[]`	Required
`label`	None	React node	None
`hint`	None	React node	None
`fieldOrientation`	None	`vertical`, `horizontal`	`vertical`
`placeholder`	None	React node	None
`triggerLabel`	None	React node	None
`indicator`	None	React node	`✓`
`icon`	None	React node	`⌄`
`emphasis`	`data-dn-emphasis`	`primary`, `secondary`, `outline`, `ghost`	`secondary`
`size`	`data-dn-size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`md`

Label and hint

Cadence

Used for reports.

import { Select } from "density-base-ui";
const items = [{ value: "weekly", label: "Weekly" }];
export default function SelectFieldExample() {
  return (
    <Select
      label="Cadence"
      hint="Used for reports."
      items={items}
      value="weekly"
    />
  );
}

Field orientation

Vertical

Horizontal

import { Select } from "density-base-ui";
const items = [{ value: "weekly", label: "Weekly" }];
export default function SelectFieldOrientationExample() {
  return (
    <div style={{ display: "grid", gap: "1rem" }}>
      <Select
        fieldOrientation="vertical"
        label="Vertical"
        items={items}
        value="weekly"
      />
      <Select
        fieldOrientation="horizontal"
        label="Horizontal"
        items={items}
        value="weekly"
      />
    </div>
  );
}

Placeholder

import { Select } from "density-base-ui";
export default function SelectPlaceholderExample() {
  return (
    <Select
      items={[{ value: "weekly", label: "Weekly" }]}
      placeholder="Choose cadence"
      value={null}
    />
  );
}

Trigger label

import { Select } from "density-base-ui";
export default function SelectTriggerLabelExample() {
  return (
    <Select
      items={[{ value: "weekly", label: "Weekly" }]}
      triggerLabel="Report cadence"
      value="weekly"
    />
  );
}

Indicator

import { Select } from "density-base-ui";
export default function SelectIndicatorExample() {
  return (
    <Select
      indicator="Selected"
      items={[{ value: "weekly", label: "Weekly" }]}
      value="weekly"
    />
  );
}

Icon

import { Select } from "density-base-ui";
export default function SelectIconExample() {
  return (
    <Select
      icon="↓"
      items={[{ value: "weekly", label: "Weekly" }]}
      value="weekly"
    />
  );
}

Emphasis

import { Select } from "density-base-ui";
const items = [{ value: "weekly", label: "Weekly" }];
export default function SelectEmphasisExample() {
  return (
    <div style={{ display: "flex", gap: "0.75rem" }}>
      <Select emphasis="primary" items={items} value="weekly" />
      <Select emphasis="secondary" items={items} value="weekly" />
      <Select emphasis="outline" items={items} value="weekly" />
      <Select emphasis="ghost" items={items} value="weekly" />
    </div>
  );
}

Size

import { Select } from "density-base-ui";
const items = [{ value: "weekly", label: "Weekly" }];
export default function SelectSizeExample() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        flexWrap: "wrap",
        gap: "0.75rem",
      }}
    >
      <Select size="2xs" items={items} value="weekly" />
      <Select size="xs" items={items} value="weekly" />
      <Select size="sm" items={items} value="weekly" />
      <Select size="md" items={items} value="weekly" />
      <Select size="lg" items={items} value="weekly" />
      <Select size="xl" items={items} value="weekly" />
      <Select size="2xl" items={items} value="weekly" />
      <Select size="3xl" items={items} value="weekly" />
    </div>
  );
}