SelectField()

SelectField(__namedParameters): Element

SelectField - A dropdown selection component with comprehensive form field features

Provides an accessible and feature-rich select dropdown with built-in validation, multiple sizing options, virtualization support for large datasets, and seamless integration with form libraries. Includes label, description, and error messaging capabilities with customizable styling through className props.

Parameters

__namedParameters

SelectFieldProps

Returns

Element

Examples

// Basic select field
<SelectField label='Country' placeholder='Select a country'>
  <OptionsItem textValue='us'>United States</OptionsItem>
  <OptionsItem textValue='ca'>Canada</OptionsItem>
  <OptionsItem textValue='uk'>United Kingdom</OptionsItem>
</SelectField>

// Select field with validation and description
<SelectField
  label="Priority Level"
  description="Choose the urgency level for this task"
  errorMessage={errors.priority}
  isRequired
  isInvalid={!!errors.priority}
>
  <OptionsItem textValue="low">Low</OptionsItem>
  <OptionsItem textValue="medium">Medium</OptionsItem>
  <OptionsItem textValue="high">High</OptionsItem>
</SelectField>

// Small size select field with custom styling
<SelectField
  size="small"
  placeholder="Quick select"
  classNames={{
    field: "custom-field-styles",
    trigger: "custom-trigger-styles"
  }}
>
  <OptionsItem textValue="option1">Option 1</OptionsItem>
  <OptionsItem textValue="option2">Option 2</OptionsItem>
</SelectField>