Multiselect
The multi-select component, prefixed by gds-multi-select
, is a dropdown menu for selecting multiple options. To open the menu, add the gds-button-dropdown--active
class to gds-multi-select
.
Demo
()=>{const [isOpen, setIsOpen] = React.useState(false);let classToggle = isOpen ? "gds-multi-select gds-button-dropdown--active" : "gds-multi-select";return (<div className={classToggle}><button className="gds-multi-select__button" onClick={()=> setIsOpen(!isOpen)}>Multi-select</button><ul className="gds-multi-select__menu"><li className="gds-multi-select__menu-item"><div className="gds-multi-select__menu-link"><div className="gds-form-group gds-multi-select__option"><div className="gds-form-group__checkbox"><label className="gds-form-group__checkbox-label"><inputclassName="gds-form-group__checkbox-input"type="checkbox"value=""/><span className="gds-form-group__checkbox-indicator"></span>CheckAll</label></div></div></div></li><li className="gds-button-dropdown__divider"></li><li className="gds-multi-select__menu-item"><divclassName="gds-multi-select__menu-link gds-multi-select__menu-link--collapsable"data-gds-nested-dropdown><divclassName="gds-form-group gds-multi-select__option"data-gds-form-group><div className="gds-form-group__checkbox"><label className="gds-form-group__checkbox-label"><inputclassName="gds-form-group__checkbox-input"type="checkbox"value=""/><span className="gds-form-group__checkbox-indicator"></span>Checkbox Option</label></div></div><div className="gds-multi-select__sub-menu" data-gds-nested-menu><div className="gds-multi-select__menu-link"><divclassName="gds-form-group gds-multi-select__option"data-gds-form-group><div className="gds-form-group__checkbox"><labelclassName="gds-form-group__checkbox-label"><inputclassName="gds-form-group__checkbox-input"type="checkbox"value=""/><span className="gds-form-group__checkbox-indicator"></span>Sub-Menu Checkbox Option</label></div></div></div><div className="gds-multi-select__menu-link"><divclassName="gds-form-group gds-multi-select__option"data-gds-form-group><div className="gds-form-group__checkbox"><labelclassName="gds-form-group__checkbox-label"><inputclassName="gds-form-group__checkbox-input"type="checkbox"value=""/><span className="gds-form-group__checkbox-indicator"></span>Sub-Menu Checkbox Option</label></div></div></div></div></div></li><li className="gds-button-dropdown__divider"></li><li className="gds-multi-select__menu-item"><div className="gds-multi-select__menu-link"><divclassName="gds-form-group gds-multi-select__option"data-gds-form-group><div className="gds-form-group__checkbox"><label className="gds-form-group__checkbox-label"><inputclassName="gds-form-group__checkbox-input"type="checkbox"value=""/><span className="gds-form-group__checkbox-indicator"></span>Checkbox Option</label></div></div></div></li></ul></div>)}
Error Log
State
gds-button-dropdown--active
Size
gds-multi-select--xs
gds-multi-select--sm
gds-multi-select__button--xs
gds-multi-select__button--sm
Context (Color)
gds-multi-select--success
gds-multi-select--warning
gds-multi-select--danger
Related Items
Input