Dropdown.Options

The Dropdown.Options slot serves as the container for all the options within the Dropdown component.

Usage

To use Dropdown.Options, wrap it inside the Dropdown component.

import Dropdown from '@components/Basic/Dropdown/Dropdown';

const App = () => {
    return (
        <Dropdown>
            <Dropdown.Options>
                <Dropdown.Option selected value="red">red</Dropdown.Option>
                <Dropdown.Option value="green">green</Dropdown.Option>
                <Dropdown.Option value="blue">blue</Dropdown.Option>
            </Dropdown.Options>
        </Dropdown>
    );
};

export default App;

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the dropdown options container element.
class	string	""	Additional CSS classes to apply to the dropdown options container element.
children	JSX.Element	""	The children of Dropdown.Options should include all the Dropdown.Option slots.
inverted-class	string	""	CSS class to apply when the dropdown options are in an inverted position (e.g., opening upwards).

Slots

Dropdown.Option

This slot is used to add a new option to the Dropdown. It also allows customization of the option’s appearance.

Note

The Dropdown.Option must be used within the Dropdown.Options slot.

Properties

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles applied directly to the dropdown option element.
class	string	""	Additional CSS classes for the dropdown option element.
value	string	undefined	The value associated with the dropdown option.
selected	boolean	false	Indicates if the dropdown option is selected.
disabled	boolean	false	Indicates if the dropdown option is disabled.
class-selected	string	""	Additional CSS classes applied when the dropdown option is selected.
class-disabled	string	""	Additional CSS classes applied when the dropdown option is disabled.
children	JSX.Element	""	Content of the option, used to render text, HTML, or JSX elements within the option.

Usage

import Dropdown from '@components/Basic/Dropdown/Dropdown';

const App = () => {
    return (
        <Dropdown>
            <Dropdown.Options>
                <Dropdown.Option selected value="red">red</Dropdown.Option>
                <Dropdown.Option disabled class-disabled="my-disabled-class" value="green">green</Dropdown.Option>
                <Dropdown.Option value="blue">blue</Dropdown.Option>
            </Dropdown.Options>
        </Dropdown>
    );
};

export default App;

Note

You can use the Dropdown.Option slot multiple times within the Dropdown.Options slot as needed.

Tip

To dynamically render options, you can use an array and map over it:

const options = [
    {value: 'option-1', text: 'Option 1', selected: true, disabled: false},
    {value: 'option-2', text: 'Option 2', selected: false}
    ...
];
...
<Dropdown.Options>
    {options.map((option) => (
        <Dropdown.Option selected={option.selected} disabled={option.disabled} value={option.value}>
            {option.text}
        </Dropdown.Option>
    ))}
</Dropdown.Options>

Alternatively, you can use the SolidJS For component:

const options = [
    {value: 'option-1', text: 'Option 1', selected: true, disabled: false},
    {value: 'option-2', text: 'Option 2', selected: false}
    ...
];
...
<Dropdown.Options>
    <For each={options}>
        {(option) => (
            <Dropdown.Option selected={option.selected} disabled={option.disabled} value={option.value}>
                {option.text}
            </Dropdown.Option>
        )}
    </For>
</Dropdown.Options>

Guide

Applying offset to dropdown options

By default, the dropdown options will open below the trigger. If there isn’t enough space, they automatically open above the trigger.

To customize the styles applied when the options are in an inverted position (opening upwards), use the inverted-class prop.

When applying an offset, handle two states: normal and inverted. Since the options are positioned using percentages, adjust those values accordingly.

Steps

1. Add the inverted-class prop to the Dropdown.Options slot and set it to your custom CSS class.
2. Define the custom CSS class in your stylesheet to apply the desired styles when the options are inverted.

App.module.css

.dropdown-options {
    top: 125%; /* Adjust the offset as needed */
}
.dropdown-options-inverted {
    bottom: 125%; /* Adjust the offset as needed */
}

import Dropdown from '@components/Basic/Dropdown/Dropdown';
import style from './App.module.css';

const App = () => {
    return (
        <Dropdown>
            <Dropdown.Options
                class={style['dropdown-options']}
                inverted-class={style['dropdown-options-inverted']}>
                <Dropdown.Option selected value="red">red</Dropdown.Option>
                <Dropdown.Option value="green">green</Dropdown.Option>
                <Dropdown.Option value="blue">blue</Dropdown.Option>
            </Dropdown.Options>
        </Dropdown>
    );
};

export default App;