Select

A custom select with native form values, keyboard navigation, and optional icons and descriptions. Give people the context to choose confidently.

View source Installation

Preview

MAKE THE CONNECTION

The right person. The right context.

Bring identities and useful detail into everyday choices.

Project owner

Open the menu to see roles alongside each person.

Priority

Workspace

Simple, when simple is right.

Native form values

Region

Import

import { Select } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
label	`string`	—	Label rendered above the select.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls height and font size.
options	`SelectOption[]`	—	Array of { value, label, description?, icon?, disabled? }. Icon content is decorative; labels remain plain strings for native form compatibility.
placeholder	`string`	—	Renders a disabled first option used as a prompt.
error	`string`	—	Error message below the field. Sets aria-invalid.
hint	`string`	—	Helper text shown when there is no error.
required	`boolean`	`false`	Marks the field as required.
fullWidth	`boolean`	`false`	Makes the wrapper fill its container.

Examples

With options array

import { Select } from '@velocityuikit/velocityui'

const countries = [
  { value: 'us', label: 'United States' },
  { value: 'ca', label: 'Canada' },
  { value: 'gb', label: 'United Kingdom' },
]

export default function Example() {
  return (
    <Select
      label="Country"
      placeholder="Select a country"
      options={countries}
    />
  )
}

With error

import { Select } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <Select
      label="Role"
      error="Please select a role."
      options={[
        { value: 'admin', label: 'Administrator' },
        { value: 'editor', label: 'Editor' },
      ]}
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */