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="radioItem" name="example" label="Radio Label" isItem />;

Checkbox as Item:

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

Usage in Dropdown component:

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

API

Name	Type	Default	Required	Description
elementType	ElementType	button	✕	Type of element used as wrapper
helperText	string	—	✕	Custom helper text
iconName	string	—	✕	Icon used in item
isDisabled	bool	false	✕	Whether is the item disabled
isSelected	bool	false	✕	Whether is the item selected
label	[string | ReactNode]	-	✔	Label of the item

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.