@mshafiqyajid/react-select
Headless select hook and styled dropdown for React. Single and multi-select, searchable, clearable, chips for multi-value, portal positioning, full keyboard navigation.
Playground #
Props
TSX
import { SelectStyled } from "@mshafiqyajid/react-select/styled";
import "@mshafiqyajid/react-select/styles.css";
<SelectStyled
items={items}
value={value}
onChange={setValue}
/>Install #
npm install @mshafiqyajid/react-selectQuick start #
import { SelectStyled } from "@mshafiqyajid/react-select/styled";
import "@mshafiqyajid/react-select/styles.css";
const items = [
{ value: "react", label: "React" },
{ value: "vue", label: "Vue" },
{ value: "svelte", label: "Svelte" },
];
const [value, setValue] = useState("");
<SelectStyled
items={items}
value={value}
onChange={setValue}
placeholder="Pick a framework"
/>Multi-select #
const [values, setValues] = useState<string[]>([]);
<SelectStyled
items={items}
value={values}
onChange={setValues}
multiple
clearable
/>Searchable #
<SelectStyled items={items} value={value} onChange={setValue} searchable />API #
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SelectItem[] | — | Array of { value, label, disabled? } |
| value | string | string[] | — | Selected value(s) |
| onChange | (v: string | string[]) => void | — | Called on selection change |
| placeholder | string | "Select…" | Placeholder text |
| multiple | boolean | false | Allow multiple selections |
| searchable | boolean | false | Show search input in dropdown |
| clearable | boolean | false | Show clear button |
| size | "sm" | "md" | "lg" | "md" | Size variant |
| tone | "neutral" | "primary" | "success" | "danger" | "neutral" | Color tone |
| disabled | boolean | false | Disable the select |