Select
This component renders a select dropdown with customizable options.
Import
import {Select }from "cui-react";
Example
Render a select dropdown: Visual:
Code:
<div style={{ maxWidth: '300px', margin: '0 auto' }}>
<Select
options={[
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'orange', label: 'Orange' },
]}
className="mt-2"
/>
</div>
Customizing
-
You can customize the Select component using the following props:
- options (required): Array of objects with value and label properties.
- className (optional): Additional CSS classes to apply to the select container.
Example: Custom Styles
Visual:
Code:
<div style={{ maxWidth: '300px', margin: '0 auto' }}>
<Select
options={[
{ value: 'red', label: 'Red' },
{ value: 'blue', label: 'Blue' },
{ value: 'green', label: 'Green' },
]}
className="mt-2 bg-gray-100 border-gray-400"
/>
</div>