Select

Select

The Select component allows users to choose one option from a list of available values.

import Label from "rocksolidjs/Label";
import Select from "rocksolidjs/Select";

export default function Example() {
  return (
    <div class="flex flex-col gap-1">
      <Label for="role">Role</Label>
      <Select
        id="role"
        options={[
          { label: "Administrator", value: "admin" },
          { label: "Editor", value: "editor" },
          { label: "Viewer", value: "viewer" },
        ]}
        onChange={(event: InputEvent) => {
          console.log((event.currentTarget as HTMLSelectElement).value);
        }}
      />
    </div>
  );
}

Examples

Options

Use the options prop to define the choices displayed in the Select. Each option accepts a label and value, with an optional disabled property for options that should not be selectable.

import Select from "rocksolidjs/Select";

export default function Example() {
  return (
    <Select
      options={[
        { label: "Engineering", value: "engineering" },
        { label: "Design", value: "design" },
        { label: "Marketing", value: "marketing" },
        { label: "Sales", value: "sales", disabled: true },
        { label: "Support", value: "support" },
      ]}
    />
  );
}

Colors

Use the color prop to communicate the semantic meaning of the Select.

import Select from "rocksolidjs/Select";

const options = [
  { label: "Pending", value: "pending" },
  { label: "In progress", value: "in-progress" },
  { label: "Completed", value: "completed" },
];

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Select
        color="default"
        options={options}
      />
      <Select
        color="success"
        options={options}
      />
      <Select
        color="warning"
        options={options}
      />
      <Select
        color="info"
        options={options}
      />
      <Select
        color="error"
        options={options}
      />
    </div>
  );
}

Sizes

Use the size prop to control the size of the Select.

import Select from "rocksolidjs/Select";

const options = [
  { label: "Low", value: "low" },
  { label: "Medium", value: "medium" },
  { label: "High", value: "high" },
];

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Select
        size="small"
        options={options}
      />
      <Select
        size="medium"
        options={options}
      />
      <Select
        size="large"
        options={options}
      />
    </div>
  );
}

Variants

Use the variant prop to control the visual style of the Select.

import Select from "rocksolidjs/Select";

const options = [
  { label: "Monthly", value: "monthly" },
  { label: "Yearly", value: "yearly" },
];

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Select
        variant="filled"
        options={options}
      />
      <Select
        variant="outlined"
        options={options}
      />
      <Select
        variant="ghost"
        options={options}
      />
    </div>
  );
}

Disabled

Use the disabled prop to prevent users from interacting with the Select.

import Select from "rocksolidjs/Select";

const options = [
  { label: "Monthly", value: "monthly" },
  { label: "Yearly", value: "yearly" },
];

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Select
        variant="filled"
        options={options}
        disabled
      />
      <Select
        variant="outlined"
        options={options}
        disabled
      />
      <Select
        variant="ghost"
        options={options}
        disabled
      />
    </div>
  );
}

Full Width

Use the fullWidth prop to make the Select span the full width of its container.

import Select from "rocksolidjs/Select";

export default function Example() {
  return (
    <div class="w-full">
      <Select
        fullWidth
        options={[
          { label: "Credit card", value: "credit-card" },
          { label: "Debit card", value: "debit-card" },
          { label: "UPI", value: "upi" },
          { label: "Bank transfer", value: "bank-transfer" },
        ]}
      />
    </div>
  );
}

Change Handling

Use the onChange prop to respond when the selected value changes.

import { createSignal } from "solid-js";
import Select from "rocksolidjs/Select";

export default function Example() {
  const [priority, setPriority] = createSignal("medium");

  return (
    <div class="flex flex-col gap-3">
      <Select
        options={[
          { label: "Low", value: "low" },
          { label: "Medium", value: "medium" },
          { label: "High", value: "high" },
          { label: "Urgent", value: "urgent" },
        ]}
        onChange={(event) => {
          setPriority((event.currentTarget as HTMLSelectElement).value);
        }}
      />

      <p>Selected priority: {priority()}</p>
    </div>
  );
}

Accessibility

  • Use a clear and descriptive label for the Select.
  • Do not rely on color alone to communicate validation or status.
  • Use disabled only when the Select is unavailable for interaction.
  • Provide meaningful option labels that clearly describe each choice.

API

Select

The Select component supports configurable colors, sizes, variants, disabled and full-width states, change handling, and a list of selectable options.

Prop Type Required Default Description
class string No — Additional CSS classes applied to the Select.
color "default" | "success" | "warning" | "info" | "error" No "default" Controls the semantic color of the Select.
disabled boolean No false Disables the Select and prevents user interaction.
fullWidth boolean No false Makes the Select span the full width of its container.
onChange (event: InputEvent) => void No — Called when the selected value changes.
options Array<{ label: string; value: string; disabled?: boolean}> No — Defines the options displayed in the Select. Each option has a label, value, and optional disabled property.
size "small" | "medium" | "large" No "medium" Controls the size of the Select.
value string No — The currently selected value of the Select.
variant "filled" | "outlined" | "ghost" No "outlined" Controls the visual style of the Select.
  • Input — Use Input when users need to enter free-form text.
  • Checkbox — Use Checkbox when users can select multiple independent options.