Select

A fully styled native select element with custom arrow, label, hint, error, and size variants. Accepts an options array or native <option> children.

Import

tsx

import { Select } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

Preview

Country

Size

Pick your preferred option.

Role

Please select a role.

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, disabled? } objects.
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

tsx

import { Select } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

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

tsx

import { Select } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

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:

css

/* 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 */
/* construction  glass  soft  high-contrast  monochrome-red */

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