Dropdown

Components

Dropdown should only be used when you need icons, brands or bank icons as select options.

<ControlGroup className="dropdown_dropdown__UTXAA">
  <SelectItem
    onSelect={function noRefCheck() {}}
    selectLabel="Pick an item"
    v2
  >
    <DropdownItem name="Wallet">
      <Icon icon="balance" />
      <Label>
        Wallet
      </Label>
    </DropdownItem>
    <DropdownItem name="Clock">
      <Icon icon="clock" />
      <Label>
        Clock
      </Label>
    </DropdownItem>
    <DropdownItem name="BankAccount">
      <Icon icon="bank-account" />
      <Label>
        Bank account
      </Label>
    </DropdownItem>
    <DropdownItem name="Robot">
      <Icon icon="chat-robot" />
      <Label>
        Robot
      </Label>
    </DropdownItem>
  </SelectItem>
</ControlGroup>

Note to developers.

Duo to a bug in trinidad-ui you need to replace <SelectItem ...> with <DropdownSelectItem ...>

Properties

DropdownItem

Prop name	Type	Default Value
disabled	bool	false
selected	bool	false
children	any
onClick	func

SelectItem

Prop name	Type	Default Value
branding	string	'default'
className	string	''
defaultText	string	'Välj...'
disabled	bool	false
isOpen	bool	false
onSelect	func	() => {}
children	node
selectLabel	string
v2	bool

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Dropdown

Properties

DropdownItem

SelectItem

Accessibility

Related