components

Input Select

Select input provides a dropdown for users to choose a single value from a predefined list of options. It supports labels, placeholder text, searchable filtering, preselected values, and disabled states.

Import

import { InputSelect } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Choose one option from a predefined list.
+When the list of options is 4-15 items.
+Form fields where free-text input is not appropriate.

When not to use

−For very long lists (20+ items) — use ComboBox/DropdownMenu with search.
−For selecting multiple items — use InputMultiselect.
−For 2-3 options — consider InputRadio for better visibility.
−For boolean toggles — use ToggleSwitch or InputCheckbox.

Examples

Code Samples

Default

A basic select input with a label and placeholder.

import { InputSelect } from "@skedulo/breeze-ui-react";

const colorOptions = [
  { label: "Red", value: "red" },
  { label: "Green", value: "green" },
  { label: "Blue", value: "blue" },
];

export default function DefaultSelect() {
  return (
    <InputSelect
      name="color-select"
      label="Favorite Color"
      placeholder="Select a color"
      options={colorOptions}
    />
  );
}

With Preselected Value

A select input with a value already selected.

import { InputSelect } from "@skedulo/breeze-ui-react";

const countryOptions = [
  { label: "Australia", value: "au" },
  { label: "United States", value: "us" },
  { label: "United Kingdom", value: "uk" },
];

export default function PreselectedSelect() {
  return (
    <InputSelect
      name="country-select"
      label="Country"
      options={countryOptions}
      value="au"
    />
  );
}

Searchable

A searchable select that lets users type to filter the options list. Use canSearch to enable this behavior.

import { InputSelect } from "@skedulo/breeze-ui-react";

const countryOptions = [
  { label: "Australia", value: "au" },
  { label: "United States", value: "us" },
  { label: "United Kingdom", value: "uk" },
  { label: "Canada", value: "ca" },
  { label: "New Zealand", value: "nz" },
];

export default function SearchableSelect() {
  return (
    <InputSelect
      name="searchable-select"
      label="Country (Searchable)"
      placeholder="Type to search..."
      options={countryOptions}
      canSearch
    />
  );
}

Disabled

A disabled select that cannot be interacted with.

import { InputSelect } from "@skedulo/breeze-ui-react";

const colorOptions = [
  { label: "Red", value: "red" },
  { label: "Green", value: "green" },
  { label: "Blue", value: "blue" },
];

export default function DisabledSelect() {
  return (
    <InputSelect
      name="disabled-select"
      label="Disabled Select"
      options={colorOptions}
      value="blue"
      disabled
    />
  );
}

Required

A required select that displays a required indicator on the label.

import { InputSelect } from "@skedulo/breeze-ui-react";

const colorOptions = [
  { label: "Red", value: "red" },
  { label: "Green", value: "green" },
  { label: "Blue", value: "blue" },
];

export default function RequiredSelect() {
  return (
    <InputSelect
      name="required-select"
      label="Required Select"
      placeholder="You must select an option"
      options={colorOptions}
      required
    />
  );
}

Guidelines

Do

✓Provide a clear label describing what the user is selecting.
✓Use placeholder to indicate the expected selection.
✓Order options logically (alphabetical, by frequency, or by importance).
✓Use the error prop for validation messages.

Don't

✗Don't use select for navigation — use links or tabs.
✗Don't include more than 15-20 options without search capability.
✗Don't use disabled options without explaining why they're unavailable.
✗Don't default to a value unless there's a clear, sensible default.

API Reference

Prop	Type	Default	Description
name*	string	—	The name attribute for the select element, used for form submission and accessibility.
options*	Array<{ value: string; label: string }>	—	The list of selectable options. Each option has a value and a display label.
label	string	—	A visible label displayed above the select field.
placeholder	string	—	Hint text displayed when no option is selected.
value	string	—	The currently selected option value.
disabled	boolean	false	Prevents user interaction and applies a disabled visual style.
canSearch	boolean	false	Enables a text filter within the dropdown, allowing users to type to search and filter options.
required	boolean	false	Marks the field as required, displaying a required indicator alongside the label.
onChange	(value: string) => void	—	Callback fired when the selected value changes.

Related Components

InputMultiselect Input Radio Dropdown Menu Input Text