Design System Beacon

Select Field

Select fields allow users to choose from a list of options. Use select fields when you need to present multiple choices in a compact format.

Overview

Select fields are form controls that allow users to choose from a dropdown list of options. They provide a compact way to present multiple choices and support various sizes and states.

All select field styles are built using design tokens, ensuring consistency across themes and hues. Use the interactive playground below to explore all available combinations.

Interactive Playground

Use the controls to customize the select field and see how it looks in real-time.

Size

Status

Label

Selected Value

Show Label

Start Icon

End Icon

Corner Radius

Select Label

<Select
  selectedValue="2"
  startIcon={<UserPersonIcon size="xs" />}
  options={options}
/>

Usage Guidelines

Use select fields when you have 5 or more options.
Provide clear, descriptive labels for each select field.
Use placeholder text to guide users on what to select.
Group related options together when possible.
Use icons to provide additional context for options.
Ensure sufficient spacing between select fields and labels.
Use appropriate select sizes based on context and importance.

Don't

Don't use select fields for fewer than 3 options (use radio buttons instead).
Don't use placeholder text as the only label.
Don't overload select fields with too many options (consider search/filter).
Don't use select fields for navigation (use buttons or links instead).
Don't disable select fields without explaining why.
Don't use overly long option labels.

API Reference

Select field component props and types.

SelectProps

interface SelectProps {
                label?: string;
                size?: "sm" | "md" | "lg" | "xl";
                status?: "default" | "hover" | "active" | "disabled";
                showLabel?: boolean;
                showStartIcon?: boolean;
                showEndIcon?: boolean;
                startIcon?: React.ReactNode;
                endIcon?: React.ReactNode;
                selectedValue?: string;
                options?: SelectOption[];
                onSelect?: (value: string) => void;
                fullWidth?: boolean;
                cornerRadius?: CornerRadiusStep;
                onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
              }

Usage Examples

Copyable code snippets for common select field use cases.

Basic Select Field

import { Select } from 'beacon-ui';
                      const options = [
                        { value: "1", label: "Option 1" },
                        { value: "2", label: "Option 2" },
                        { value: "3", label: "Option 3" },
                      ];

                      <Select 
                        options={options}
                        selectedValue={selectedValue}
                        onSelect={setSelectedValue}
                        showStartIcon={false}
                      />

Select with Label and Icon

Choose an option

import { Select } from 'beacon-ui';
                        import { UserPersonIcon } from 'beacon-ui/icons';

                        <Select 
                          label="Choose an option"
                          options={options}
                          selectedValue={selectedValue}
                          onSelect={setSelectedValue}
                          startIcon={<UserPersonIcon size="xs" />}
                        />