Select

Select component is a component that allows users pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead.

Import

import { Select } from '@outfitio/outkit';

Usage

Here's a basic usage of the Select component.

Changing the size of the Select

There are three sizes of select : large (48px), default (40px) and small (32px).

Changing the appearance of the Select

Just like the input component, select comes in 3 variants, outline, unstyled , flushed , and filled. Pass the variant prop and set it to either of these values.

Changing the icon in the Select

You can change the arrow icon used in the select. Simply pass the icon prop.

In case the custom icon size doesn't look right, you can pass the iconSize prop to change it.

🚨 This feature works in v0.5.1. Kindly upgrade if you need it

// This is an icon from "react-icons"
<Select icon={MdArrowDropDown} iconSize={8} placeholder="Woohoo! A new icon" />

Overriding the styles of the Select

Even though the select comes with predefined styles, you can override pretty much any property. Here's we'll override the background color.

Props

The Select component composes PseudoBox so you can pass all PseudoBox props, and React.SelectHTMLAttributes.