Select

TS

import { … } from "@fungi.computer/caps/components/select";

Hero

TSX

import { Select } from "@fungi.computer/caps/components/select";

export default function Hero() {
  return (
    <Select className="max-w-xs" defaultValue="chanterelle">
      <option value="chanterelle">Chanterelle</option>
      <option value="morel">Morel</option>
      <option value="lions-mane">Lion's mane</option>
    </Select>
  );
}

States

TSX

import { Select } from "@fungi.computer/caps/components/select";

export default function States() {
  return (
    <div className="flex max-w-xs flex-col gap-2">
      <Select defaultValue="">
        <option disabled value="">
          Choose a habitat
        </option>
        <optgroup label="Forest">
          <option value="deciduous">Deciduous</option>
          <option value="conifer">Conifer</option>
        </optgroup>
      </Select>
      <Select defaultValue="locked" disabled>
        <option value="locked">Reserved spot</option>
      </Select>
      <Select defaultValue="" invalid>
        <option disabled value="">
          Required
        </option>
        <option value="yes">Yes</option>
      </Select>
    </div>
  );
}

Interactive

TSX

import { useState } from "react";
import { Select } from "@fungi.computer/caps/components/select";

export default function Interactive() {
  const [sort, setSort] = useState("recent");
  return (
    <div className="flex max-w-xs flex-col gap-2">
      <Select
        onChange={(event) => {
          setSort(event.target.value);
        }}
        value={sort}
      >
        <option value="recent">Most recent</option>
        <option value="nearby">Nearest first</option>
        <option value="rare">Rarest first</option>
      </Select>
      <p className="text-xs text-base-content">Sorting by {sort}</p>
    </div>
  );
}

Props

SelectProps

Prop	Type	Description
invalid?	boolean

• invalid?boolean

Full types: API reference.