Select

A dropdown select component with validation states, icons, and FormControl integration for form inputs

CountrySelect your country

'use client';

import { Select } from '@/ui/forms/Select';

export function SelectDemo() {
  return (
    <Select label="Country" description="Select your country">
      <option value="">Choose a country</option>
      <option value="us">United States</option>
      <option value="uk">United Kingdom</option>
      <option value="ca">Canada</option>
      <option value="fr">France</option>
    </Select>
  );
}

Installation


npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/select.json

Usage

'use client';
 
import { Select } from '@/docs/lib/ui/forms/select';
import { useState } from 'react';
 
export function Component() {
  const [country, setCountry] = useState('');
 
  return (
    <Select
      label="Country"
      description="Select your country"
      value={country}
      onChange={(name, value) => setCountry(value)}
      required
    >
      <option value="">Choose a country</option>
      <option value="us">United States</option>
      <option value="uk">United Kingdom</option>
      <option value="ca">Canada</option>
      <option value="fr">France</option>
    </Select>
  );
}

API Reference

Select

Prop	Type	Default	Description
`label`	`string`	`undefined`	Label text displayed above the select input
`description`	`string`	`undefined`	Helper text displayed below the label
`id`	`string`	Auto-generated	Unique identifier for the select element
`name`	`string`	Same as `id`	Name attribute for form submission
`value`	`Value` (generic)	`undefined`	Current selected value (controlled component)
`onChange`	`(name: string, value: Value) => void`	`undefined`	Callback fired when selection changes, receives name and new value
`disabled`	`boolean`	`false`	Whether the select is disabled
`required`	`boolean`	`false`	Whether the select is required (shows asterisk in label)
`hideRequiredStar`	`boolean`	`false`	Hides the required asterisk when true
`validationStatus`	`"default" \| "error" \| "success"`	`"default"`	Visual validation state with colored borders and icons
`errorMessage`	`string`	`undefined`	Error message displayed below the select when validationStatus is "error"
`iconType`	`IconicTypes`	`undefined`	Icon type for validation icons
`dataTestId`	`string`	Same as `id`	Test ID for testing purposes
`className`	`string`	`undefined`	Additional CSS classes for the FormControl container
`children`	`React.ReactNode`	`undefined`	Option elements (`<option>`) to display in the dropdown
...rest	`SelectHTMLAttributes<HTMLSelectElement>`	-	All standard HTML select attributes are supported

Notes

Generic Value Type: The Select component supports generic value types via Select<Value>, allowing type-safe value handling for different data types (strings, numbers, objects, etc.).
Automatic State Management: Uses the useValue hook internally to manage state automatically. When onChange is provided, it will be called with (name, value) parameters.
FormControl Integration: The select is wrapped in a FormControl component that handles label, description, required indicator, and error message display consistently with other form components.
Validation States: Three visual states available:
- default: Light grey border with focus/active states
- error: Red border with cross icon
- success: Green border with checkmark icon
Validation Icons: Error and success states automatically display appropriate icons (cross for error, checkmark for success) positioned to the left of the dropdown arrow.
Dropdown Arrow: A fixed dropdown arrow icon is always displayed on the right side of the select, styled with a custom button appearance.
Disabled State: When disabled, the select has a pearl background, grey text, and cannot be interacted with.
Rounded Pill Design: The select uses rounded pill styling (rounded-pill class) for a modern, friendly appearance.
Automatic ID Generation: If no id is provided, one is automatically generated using React's useId hook. The name defaults to the id if not specified.
Accessibility: The select has proper ARIA attributes including aria-label set to the name attribute, and standard select accessibility with combobox role.
Dynamic Padding: The select adjusts its right padding based on validation state to accommodate validation icons (52px for default, 84px for error/success).
Data Attributes: The component includes data-name="Select" and data-testid attributes for testing and debugging purposes.
Client Component: This is a client component ("use client") due to its use of React hooks (useState, useId) and interactive functionality.

Range SidebarLayout

On This Page

Installation Usage API Reference Select Notes