Density

Select

Select renders Base UI’s select primitives from one items prop and uses the shared low-emphasis disclosure chevron by default.

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" },
      ]}
    />
  );
}

Label and hint

Used for reports.
import { useState } from "react";
import { Select } from "density-base-ui";
const items = [
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
];
export default function SelectFieldExample() {
  const [value, setValue] = useState("weekly");
  const updateValue = (nextValue: unknown) => {
    if (typeof nextValue === "string") {
      setValue(nextValue);
    }
  };

  return (
    <Select
      label="Cadence"
      hint="Used for reports."
      items={items}
      onValueChange={updateValue}
      value={value}
    />
  );
}

Error

Choose a reporting cadence.
import { useState } from "react";
import { Select } from "density-base-ui";

const items = [
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
];

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

  return (
    <Select
      errorMessage="Choose a reporting cadence."
      hint="Used for reports."
      items={items}
      label="Cadence"
      onValueChange={updateValue}
      value={value}
    />
  );
}

Field orientation

import { useState } from "react";
import { Select, View } from "density-base-ui";
const items = [
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
];
export default function SelectFieldOrientationExample() {
  const [verticalValue, setVerticalValue] = useState("weekly");
  const [horizontalValue, setHorizontalValue] = useState("weekly");
  const updateVerticalValue = (nextValue: unknown) => {
    if (typeof nextValue === "string") {
      setVerticalValue(nextValue);
    }
  };
  const updateHorizontalValue = (nextValue: unknown) => {
    if (typeof nextValue === "string") {
      setHorizontalValue(nextValue);
    }
  };

  return (
    <View>
      <Select
        fieldOrientation="vertical"
        label="Vertical"
        items={items}
        onValueChange={updateVerticalValue}
        value={verticalValue}
      />
      <Select
        fieldOrientation="horizontal"
        label="Horizontal"
        items={items}
        onValueChange={updateHorizontalValue}
        value={horizontalValue}
      />
    </View>
  );
}

Placeholder

import { useState } from "react";
import { Select } from "density-base-ui";
export default function SelectPlaceholderExample() {
  const [value, setValue] = useState<string | null>(null);
  const updateValue = (nextValue: unknown) => {
    if (typeof nextValue === "string") {
      setValue(nextValue);
    }
  };

  return (
    <Select
      items={[
        { value: "daily", label: "Daily" },
        { value: "weekly", label: "Weekly" },
      ]}
      onValueChange={updateValue}
      placeholder="Choose cadence"
      value={value}
    />
  );
}

Icon

import { useState } from "react";
import { Select } from "density-base-ui";
export default function SelectIconExample() {
  const [value, setValue] = useState("weekly");
  const updateValue = (nextValue: unknown) => {
    if (typeof nextValue === "string") {
      setValue(nextValue);
    }
  };

  return (
    <Select
      icon="↓"
      items={[
        { value: "daily", label: "Daily" },
        { value: "weekly", label: "Weekly" },
      ]}
      onValueChange={updateValue}
      value={value}
    />
  );
}

Emphasis

import { useState, type ComponentProps } from "react";
import { Select, View } from "density-base-ui";

const items = [
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
];

function EmphasisSelect({
  emphasis,
}: {
  emphasis: ComponentProps<typeof Select>["emphasis"];
}) {
  const [value, setValue] = useState("weekly");
  const updateValue = (nextValue: unknown) => {
    if (typeof nextValue === "string") {
      setValue(nextValue);
    }
  };

  return (
    <Select
      emphasis={emphasis}
      items={items}
      onValueChange={updateValue}
      value={value}
    />
  );
}

export default function SelectEmphasisExample() {
  return (
    <View orientation="horizontal" padding={false}>
      <EmphasisSelect emphasis="primary" />
      <EmphasisSelect emphasis="secondary" />
      <EmphasisSelect emphasis="outline" />
      <EmphasisSelect emphasis="ghost-primary" />
      <EmphasisSelect emphasis="ghost-secondary" />
      <EmphasisSelect emphasis="ghost-tertiary" />
    </View>
  );
}

Size

import { useState, type ComponentProps } from "react";
import { Select, View } from "density-base-ui";

const items = [
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
];

function SizeSelect({ size }: { size: ComponentProps<typeof Select>["size"] }) {
  const [value, setValue] = useState("weekly");
  const updateValue = (nextValue: unknown) => {
    if (typeof nextValue === "string") {
      setValue(nextValue);
    }
  };

  return (
    <Select
      items={items}
      onValueChange={updateValue}
      size={size}
      value={value}
    />
  );
}

export default function SelectSizeExample() {
  return (
    <View align="center" orientation="horizontal" padding={false} wrap>
      <SizeSelect size="2xs" />
      <SizeSelect size="xs" />
      <SizeSelect size="sm" />
      <SizeSelect size="md" />
      <SizeSelect size="lg" />
      <SizeSelect size="xl" />
      <SizeSelect size="2xl" />
      <SizeSelect size="3xl" />
    </View>
  );
}

Padding

Select adds padding around its popup list by default. Set padding={false} when the list should reach the popup edges. This does not affect the trigger.

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

const items = [
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
];

type PaddingSelectProps = {
  padding?: boolean;
};

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

  return (
    <Select
      items={items}
      onValueChange={updateValue}
      padding={padding}
      value={value}
    />
  );
}

export default function SelectPaddingExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <PaddingSelect padding={false} />
      <PaddingSelect />
    </View>
  );
}