Select

To use, import from @marvelapp/ui:

import { Select } from '@marvelapp/ui';

Usage

The <Select /> component accepts html <option /> elements as children.

<Select size={2}>
  {['Designers', 'Developers'].map((option, index) => (
    <option key={index} selected={selected === option} value={option}>
      {option}
    </option>
  ))}
</Select>

Size

The <Select /> component has a few sizes available that can be used depending where in the page hierarchy they sit.

Small
Medium
Large
Extra Large
<Select size={3} />
<Select size={2} />
<Select size={1} />
<Select size={0} />

Kind

The <Select /> component has a few kinds available that can be used depending on the context of the action being performed.

Ghost
Disabled
Error
Design Tool
<Select kind="ghost" />
<Select kind="disabled" />
<Select kind="error" />
<Select kind="design" />

Props

Prop
Type
Default
bg
string
white
border
string
none
disabled
boolean
false
kind
ghost
disabled
error
design
ghost
size
0
1
2
3
1
width
number
1