Select

The form-control component that provides a menu of options.

npm install @vrembem/select

@use "@vrembem/select";

Options

Select uses design token CSS variables in a reference and fallback pattern. Variables are referenced in the component's styles but are not directly defined; instead, they are provided with sensible fallbacks.

Variable	Fallback
`--vb-select-accent` Copied!	`var(--vb-form-control-accent)` Copied!
`--vb-select-size` Copied!	`var(--vb-form-control-size)` Copied!
`--vb-select-line-height` Copied!	`var(--vb-form-control-line-height)` Copied!
`--vb-select-padding` Copied!	`var(--vb-form-control-padding)` Copied!
`--vb-select-gap` Copied!	`1em` Copied!
`--vb-select-border-radius` Copied!	`var(--vb-form-control-border-radius)` Copied!
`--vb-select-border-width` Copied!	`var(--vb-form-control-border-width)` Copied!
`--vb-select-background` Copied!	`var(--vb-form-control-background)` Copied!
`--vb-select-foreground` Copied!	`var(--vb-form-control-foreground)` Copied!
`--vb-select-border-color` Copied!	`var(--vb-border-color-strong)` Copied!
`--vb-select-box-shadow` Copied!	`var(--vb-form-control-box-shadow)` Copied!
`--vb-select-background-hover` Copied!	`var(--vb-select-background)` Copied!
`--vb-select-foreground-hover` Copied!	`var(--vb-select-foreground)` Copied!
`--vb-select-border-color-hover` Copied!	`var(--vb-select-border-color)` Copied!
`--vb-select-box-shadow-hover` Copied!	`var(--vb-form-control-box-shadow)` Copied!
`--vb-select-background-focus` Copied!	`var(--vb-select-background)` Copied!
`--vb-select-foreground-focus` Copied!	`var(--vb-select-foreground)` Copied!
`--vb-select-box-shadow-focus` Copied!	`none` Copied!
`--vb-select-background-disabled` Copied!	`var(--vb-form-control-background-disabled)` Copied!
`--vb-select-opacity-disabled` Copied!	`var(--vb-form-control-opacity-disabled)` Copied!
`--vb-select-picker-icon-size` Copied!	`0.8em` Copied!
`--vb-select-picker-icon-color` Copied!	`currentcolor` Copied!
`--vb-select-picker-appearance` Copied!	`base-select` Copied!
`--vb-select-picker-offset` Copied!	`0.5em` Copied!
`--vb-select-picker-padding` Copied!	`0.5em 0` Copied!
`--vb-select-picker-border` Copied!	`none` Copied!
`--vb-select-picker-foreground` Copied!	`var(--vb-form-control-foreground)` Copied!
`--vb-select-picker-background` Copied!	`var(--vb-form-control-background)` Copied!
`--vb-select-picker-box-shadow` Copied!	`var(--vb-box-shadow-md)` Copied!
`--vb-select-option-padding` Copied!	`0.25em 1em 0.25em 0.5em` Copied!
`--vb-select-option-border-radius` Copied!	`0` Copied!
`--vb-select-option-gap` Copied!	`1px` Copied!
`--vb-select-option-background-hover` Copied!	`color-mix(in oklch, currentcolor 4%, transparent)` Copied!
`--vb-select-option-background-active` Copied!	`color-mix(in oklch, currentcolor 8%, transparent)` Copied!
`--vb-select-checkmark-icon-size` Copied!	`1em` Copied!
`--vb-select-checkmark-icon-color` Copied!	`var(--vb-select-accent)` Copied!

There are no variables that match your search.

Basic usage

The most basic implementation of the select component consists of the .select class applied to a <select> form-control element.

<select class="select">
  <option value="">Select one</option>
  ...
</select>

Disabled

Adding the boolean disabled attribute to the select will provide visual indication that the form-control is not available for use.

<select class="select" disabled>
  ...
</select>

Invalid

Adding the is-invalid class or aria-invalid="true" attribute to the select will provide visual indication that the form-control value is invalid. Invalid state is also triggered by the native :user-invalid state.

<select class="select is-invalid">
  <option value="">Select one</option>
  ...
</select>

Edit page

Input

Checkbox