---
title: Select
description: Customize the native `<select>`s with custom CSS that changes the element’s initial appearance.
toc: true
---

## Default

Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`’s initial appearance and cannot modify the `<option>`s due to browser limitations.

<Example code={`
    Open this select menu
    One
    Two
    Three
  `} />

## Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

<Example code={`
    Open this select menu
    One
    Two
    Three

    Open this select menu
    One
    Two
    Three
  `} />

The `multiple` attribute is also supported:

<Example code={`
    Open this select menu
    One
    Two
    Three
  `} />

As is the `size` attribute:

<Example code={`
    Open this select menu
    One
    Two
    Three
  `} />

## Disabled

Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.

<Example code={`
    Open this select menu
    One
    Two
    Three
  `} />

## CSS

### Sass variables

<ScssDocs name="form-select-variables" file="scss/_variables.scss" />
