Item

The Item component is used to display a single item in a list. It can be used in Dropdown or similar.

To use Item with checkbox or radio please use components Checkbox or Radio with isItem property. We do this to avoid repeating the same code and to simplify the API.

Simple Item example:

                                                
                                                import { Item } from '@lmc-eu/spirit-web-react';
                                                
                                                <Item label="Item" />;

Item with icon example:

                                                
                                                import { Item } from '@lmc-eu/spirit-web-react';
                                                
                                                <Item label="Item" iconName="search" />;

Item in selected state example:

                                                
                                                import { Item } from '@lmc-eu/spirit-web-react';
                                                
                                                <Item label="Item" isSelected />;

Item with Helper text example:

                                                
                                                import { Item } from '@lmc-eu/spirit-web-react';
                                                
                                                <Item label="Item" helperText="Helper text" />;

Item in disabled state example:

                                                
                                                import { Item } from '@lmc-eu/spirit-web-react';
                                                
                                                <Item label="Item" isDisabled />;

Item with icon and helper text in selected state example:

                                                
                                                import { Item } from '@lmc-eu/spirit-web-react';
                                                
                                                <Item label="Item" iconName="search" helperText="Helper text" isSelected />;

Item as a link example:

                                                
                                                import { Item } from '@lmc-eu/spirit-web-react';
                                                
                                                <Item label="Item" elementType="a" href="#" />;

Radio as Item:

                                                
                                                import { Radio } from '@lmc-eu/spirit-web-react';
                                                
                                                <Radio id="radio-item" name="example" label="Radio Label" isItem />;

Checkbox as Item:

                                                
                                                import { Checkbox } from '@lmc-eu/spirit-web-react';
                                                
                                                <Checkbox id="checkbox-item" name="example" label="Checkbox Label" isItem />;

Usage in Dropdown component:

                                                
                                                import { Dropdown, DropdownTrigger, DropdownPopover, Item } from '@lmc-eu/spirit-web-react/components';
                                                
                                                const [isOpen, setIsOpen] = React.useState(false);
                                                const onToggle = () => setIsOpen(!isOpen);
                                                
                                                <Dropdown id="dropdown-example" isOpen={isOpen} onToggle={onToggle}>
                                                  <DropdownTrigger elementType="button">Trigger button</DropdownTrigger>
                                                  <DropdownPopover>
                                                    <Item elementType="a" href="#" label="Item label" />
                                                  </DropdownPopover>
                                                </Dropdown>;

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

Icons

This component uses the Icon component internally. To ensure correct rendering, please refer to the Icon component documentation for setup instructions.