Select

Lets a user choose one option from a list in a popup.

Basic

Server type

Show code

import {
  Select,
  SelectContent,
  SelectField,
  SelectItem,
  SelectLabel,
  SelectList,
  SelectTrigger,
} from "@makeplane/propel/components/select";

const SERVER_TYPES = [
  { label: "General purpose", value: "general" },
  { label: "Compute optimized", value: "compute" },
  { label: "Memory optimized", value: "memory" },
];

export default function BasicDemo() {
  return (
    <Select items={SERVER_TYPES} defaultValue="general">
      <SelectField>
        <SelectLabel>Server type</SelectLabel>
        <SelectTrigger magnitude="md" />
      </SelectField>
      <SelectContent>
        <SelectList>
          {SERVER_TYPES.map(({ label, value }) => (
            <SelectItem key={value} value={value} magnitude="md" label={label} />
          ))}
        </SelectList>
      </SelectContent>
    </Select>
  );
}

Placeholder

Without a defaultValue, the trigger shows its placeholder until an option is picked.

Server type

Show code

import {
  Select,
  SelectContent,
  SelectField,
  SelectItem,
  SelectLabel,
  SelectList,
  SelectTrigger,
} from "@makeplane/propel/components/select";

const SERVER_TYPES = [
  { label: "General purpose", value: "general" },
  { label: "Compute optimized", value: "compute" },
  { label: "Memory optimized", value: "memory" },
];

export default function PlaceholderDemo() {
  return (
    <Select items={SERVER_TYPES}>
      <SelectField>
        <SelectLabel>Server type</SelectLabel>
        <SelectTrigger magnitude="md" placeholder="Choose a server type" />
      </SelectField>
      <SelectContent>
        <SelectList>
          {SERVER_TYPES.map(({ label, value }) => (
            <SelectItem key={value} value={value} magnitude="md" label={label} />
          ))}
        </SelectList>
      </SelectContent>
    </Select>
  );
}

Multiple

Server types

Show code

import {
  Select,
  SelectContent,
  SelectField,
  SelectItem,
  SelectLabel,
  SelectList,
  SelectTrigger,
} from "@makeplane/propel/components/select";

const SERVER_TYPES = [
  { label: "General purpose", value: "general" },
  { label: "Compute optimized", value: "compute" },
  { label: "Memory optimized", value: "memory" },
];

export default function MultipleDemo() {
  return (
    <Select multiple items={SERVER_TYPES} defaultValue={["general", "compute"]}>
      <SelectField>
        <SelectLabel>Server types</SelectLabel>
        <SelectTrigger magnitude="md" />
      </SelectField>
      <SelectContent>
        <SelectList>
          {SERVER_TYPES.map(({ label, value }) => (
            <SelectItem key={value} value={value} magnitude="md" label={label} />
          ))}
        </SelectList>
      </SelectContent>
    </Select>
  );
}

Grouped

Region

Show code

import {
  Select,
  SelectContent,
  SelectField,
  SelectGroup,
  SelectGroupLabel,
  SelectItem,
  SelectLabel,
  SelectList,
  SelectTrigger,
} from "@makeplane/propel/components/select";

const REGION_GROUPS = [
  {
    label: "Americas",
    items: [
      { label: "US Central 1", value: "us-central-1" },
      { label: "US East 1", value: "us-east-1" },
    ],
  },
  {
    label: "Europe",
    items: [
      { label: "EU Central 1", value: "eu-central-1" },
      { label: "EU West 1", value: "eu-west-1" },
    ],
  },
];

export default function GroupedDemo() {
  return (
    <Select items={REGION_GROUPS.flatMap((group) => group.items)} defaultValue="us-central-1">
      <SelectField>
        <SelectLabel>Region</SelectLabel>
        <SelectTrigger magnitude="md" />
      </SelectField>
      <SelectContent>
        <SelectList>
          {REGION_GROUPS.map((group) => (
            <SelectGroup key={group.label}>
              <SelectGroupLabel>{group.label}</SelectGroupLabel>
              {group.items.map(({ label, value }) => (
                <SelectItem key={value} value={value} magnitude="md" label={label} />
              ))}
            </SelectGroup>
          ))}
        </SelectList>
      </SelectContent>
    </Select>
  );
}

Sizes

Show code

import {
  Select,
  SelectContent,
  SelectField,
  SelectItem,
  SelectLabel,
  SelectList,
  SelectTrigger,
  type SelectTriggerMagnitude,
} from "@makeplane/propel/components/select";

const SERVER_TYPES = [
  { label: "General purpose", value: "general" },
  { label: "Compute optimized", value: "compute" },
  { label: "Memory optimized", value: "memory" },
];

const MAGNITUDES: SelectTriggerMagnitude[] = ["sm", "md", "lg"];

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-end gap-3">
      {MAGNITUDES.map((magnitude) => (
        <Select key={magnitude} items={SERVER_TYPES} defaultValue="general">
          <SelectField>
            <SelectLabel>{magnitude}</SelectLabel>
            <SelectTrigger magnitude={magnitude} />
          </SelectField>
          <SelectContent>
            <SelectList>
              {SERVER_TYPES.map(({ label, value }) => (
                <SelectItem key={value} value={value} magnitude={magnitude} label={label} />
              ))}
            </SelectList>
          </SelectContent>
        </Select>
      ))}
    </div>
  );
}

Installation

import {
  Select,
  SelectContent,
  SelectItem,
  SelectLabel,
  SelectList,
  SelectTrigger,
} from "@makeplane/propel/components/select";

Props

Select

Prop	Type	Required	Description
children	ReactNode	No	The select's anatomy — a `SelectTrigger` and the popup of items.

SelectTrigger

Prop	Type	Required	Description
magnitude	"sm" \| "md" \| "lg"	Yes	Visual size of the trigger: controls its height, text, and icon size. Required.
placeholder	ReactNode	No	Shown in the trigger while nothing is selected — Base UI's `Select.Value` placeholder.

SelectItem

Prop	Type	Required	Description
magnitude	"sm" \| "md" \| "lg"	Yes	Visual size of the row: controls its height and text size. Required.
label	string	Yes	Option label.