Select

The Select component uses the compound pattern to compose a native select control from reusable parts.

Usage

Compose the field with Select, Select.Label, Select.Control, Select.Item, and Select.HelperText.

import React from 'react';
import { Select } from '@nathan3boss/ui/select';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame width="320px">
      <Select>
        <Select.Label>Spell school</Select.Label>
        <Select.Control defaultValue="support">
          <Select.Item value="support">Support</Select.Item>
          <Select.Item value="offense">Offense</Select.Item>
          <Select.Item value="utility">Utility</Select.Item>
        </Select.Control>
      </Select>
    </ExampleFrame>
  );
};

Helper Text

The helper area shares the same semantic colors used across the library.

Choose a valid school before continuing.
import React from 'react';
import { Select } from '@nathan3boss/ui/select';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame width="320px">
      <Select color="danger" helperColor="danger">
        <Select.Label>Spell school</Select.Label>
        <Select.Control defaultValue="support">
          <Select.Item value="support">Support</Select.Item>
          <Select.Item value="offense">Offense</Select.Item>
          <Select.Item value="utility">Utility</Select.Item>
        </Select.Control>
        <Select.HelperText>Choose a valid school before continuing.</Select.HelperText>
      </Select>
    </ExampleFrame>
  );
};

Side Content

Use startContent and endContent to add visual context while preserving the native select behavior.

import React from 'react';
import { HugeiconsIcon } from '@hugeicons/react';
import { Search01Icon } from '@hugeicons/core-free-icons';
import { Select } from '@nathan3boss/ui/select';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame width="320px">
      <Select>
        <Select.Label>Search mode</Select.Label>
        <Select.Control
          defaultValue="manual"
          startContent={<HugeiconsIcon color="currentColor" icon={Search01Icon} size={18} />}
        >
          <Select.Item value="manual">Manual</Select.Item>
          <Select.Item value="automatic">Automatic</Select.Item>
        </Select.Control>
      </Select>
    </ExampleFrame>
  );
};

API

Select

PropertyDescriptionTypeDefault Value
classNameMerges custom classes into the root container.string | undefined-
helperColorShares the helper text semantic color across nested parts.HelperTextColor | undefined'default'
sizeShares the field spacing and typography scale across nested parts.InputSize | undefined'md'
colorShares the semantic color across nested parts.InputColor | undefined'default'