Kumo

@cloudflare/kumo

Select

Displays a list of options for the user to pick from—triggered by a button.

<Select className="w-[200px]">
  <Select.Option value="option1">Option 1</Select.Option>
  <Select.Option value="option2">Option 2</Select.Option>
  <Select.Option value="option3">Option 3</Select.Option>
</Select>

Installation

import { Select } from "~/components/select/select";

Usage

import { Select } from "~/components/select/select";

export default function Example() {
  return (
    <Select>
      <Select.Option value="option1">Option 1</Select.Option>
      <Select.Option value="option2">Option 2</Select.Option>
    </Select>
  );
}

Examples

Default

<Select className="w-[200px]">
  <Select.Option value="all">All versions</Select.Option>
  <Select.Option value="active">Active versions</Select.Option>
  <Select.Option value="specific">Specific versions</Select.Option>
</Select>

With Custom Render

<Select
  className="w-[200px]"
  renderValue={(v) => {
    const labels: Record<string, string> = {
      all: "All deployed versions",
      active: "Active versions",
      specific: "Specific versions",
    };
    return v ? labels[v] : "Select...";
  }}
>
  <Select.Option value="all">All deployed versions</Select.Option>
  <Select.Option value="active">Active versions</Select.Option>
  <Select.Option value="specific">Specific versions</Select.Option>
</Select>