React
Is new design vision part implemented using new tokens?
Up to date
Resources
Example
import { useState } from 'react';
import { Select } from '@optimus-web/core';
const MySelectComponent = () => {
const [selectedValue, setSelectedValue] = useState<Selected>('');
const selectOptions = [
{ key: 'fujiyama', value: 'fujiyama', label: 'Fujiyama Hotel' },
{ key: 'boomerang', value: 'boomerang', label: 'Boomerang Hotel' },
{ key: 'le-grand-hotel', value: 'le-grand-hotel', label: 'Le Grand Hotel' },
];
return (
<Select
name="select-field"
selected={selectedValue}
label="Choose your property"
onChange={(_, value) => setSelectedValue(value)}
footer={{
primary: (
<DropdownFooterButton variant="primary" onClick={action('Primary footer action')}>
Apply
</DropdownFooterButton>
),
secondary: ({ close }: { close: () => void }) => (
<DropdownFooterButton variant="tertiary" onClick={close}>
Close
</DropdownFooterButton>
),
}}
>
{selectOptions.map((item: { key: string; value: string; label: string }) => (
<DropdownItem key={item.key} value={item.value} label={item.label} />
)),}
</Select>
);
};