Components
Select
A responsive, highly customizable select component with multi-variant and color scheme support built on Class Variance Authority (CVA).
Preview
Installation
You can install the component via the CLI or import it directly from the component package.
When initializing the project with beej it is already initializedpnpm add @thanka-digital/beej-componentUsage
import { Select } from "@thanka-digital/beej-component";
export default function Example() {
return (
<Select
variant="default"
colorscheme="secondary"
options={[
{ label: "Option 1", value: 1 },
{ label: "Option 2", value: 2 },
{ label: "Option 3", value: 3 },
{ label: "Option 4", value: 4 },
]} />
);
}Props Reference
Alongside all the in-built input component props we have some extra props that can be used to style the input component.
Prop
Type
Interactive Playground
Test different combinations props to see how <Select /> behaves in your project:
Live JSX Code
<Select
colorscheme="primary"
padding="base"
id="demo-input"
options=[{"label":"Option A","value":"A"},{"label":"Option B","value":"B"},{"label":"Option C","value":"C"},{"label":"Option D","value":"D"}]
label="Select Option"
variant="default"
/>