Forms

Select

An accessible select dropdown component with support for options, groups, and custom styling. Designed for healthcare forms requiring patient data selection.

Basic Usage

Standard select dropdowns for choosing from predefined options like insurance providers.

Insurance Provider

Appointment Type

With Placeholder

Use placeholders to guide users when no option is selected.

Select Provider

Insurance Plan

With Icons

Icons help users quickly identify the purpose of the select field.

Insurance Provider

Appointment Type

Primary Care Provider

Validation States

Show validation feedback to guide users in making required selections. Use validateOnMount to show validation state immediately. Try selecting/clearing values to see reactive updates.

Provider Selection (validateOnMount)

Appointment Type (validates on blur)

Insurance Provider (success state)

Sizes

Choose appropriate sizes based on form density and importance.

Small Select

Medium Select

Large Select

Disabled State

Disable selects when options are not available or the field is not applicable.

Insurance Provider

Provider Selection

Option Groups

Group related options together for better organization, especially useful for large lists.

Specialty Department

Props

Prop	Type	Default	Description
`id`	`string`	—	Unique identifier for the select
`name`	`string`	—	Form field name
`label` *	`string`	—	Label text for the select
`value`	`string`	''	Current value
`placeholder`	`string`	'Select an option'	Placeholder text
`options` *	`SelectOption[] \| SelectGroup[]`	—	Array of options or option groups
`required`	`boolean`	false	Whether the field is required
`disabled`	`boolean`	false	Whether the field is disabled
`error`	`string`	—	Error message to display (shows red border and error icon)
`successMessage`	`string`	—	Success message when valid (shows green border and check icon)
`hint`	`string`	—	Hint text to display below the select
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Size of the select
`hideLabel`	`boolean`	false	Whether to hide the label visually (still accessible)
`class`	`string`	—	Additional CSS classes for the wrapper
`iconLeft`	`Snippet`	—	Icon to display on the left
`onchange`	`(event: Event) => void`	—	Change handler
`onblur`	`(event: FocusEvent) => void`	—	Blur handler
`testId`	`string`	—	Test ID for e2e testing (Playwright, Cypress)
`validateOnMount`	`boolean`	false	Show validation state immediately without waiting for user interaction

Healthcare Best Practices

• Always provide clear, descriptive labels for select fields (e.g., "Primary Insurance Provider" instead of "Insurance")
• Use option groups to organize large lists of providers, specialties, or insurance plans
• Validate required selections before form submission, especially for insurance and provider fields
• Include helpful hint text for complex selections like insurance plan types or appointment categories
• Disable selects when data is being loaded or when selections are not applicable to the current context
• Use consistent option ordering (alphabetical for providers, logical grouping for appointment types)
• Ensure all select options are accessible via keyboard navigation for compliance with healthcare accessibility standards