Free Astro Components

The select component allows users to choose from a dropdown list of options. It supports various configurations and customization options, including disabled states, helper text, and custom styles.

Import

To use the select component, first import it into your project:

---
import { Select } from 'free-astro-components'
---

Usage

Here’s how you can use the select component in your Astro project:

Basic Usage

To create a basic dropdown select field, use the following code:

Select an option

Disabled

To disable the select field, set the disabled prop to true.

Disabled Select

---
import { Select } from 'free-astro-components'
---

<Select
  label="Disabled Select"
  options={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' },
  ]}
  disabled
  placeholder="Cannot select"
/>
<Select
  label="Disabled Select"
  options={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2', selected: true },
    { value: '3', label: 'Option 3' },
  ]}
  disabled
  placeholder="Cannot select"
/>

Helper Text

You can provide additional information using the helperText prop.

Select with Helper Text

Choose an option from the list.

---
import { Select } from 'free-astro-components'
---

<Select
  label="Select with Helper Text"
  options={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' },
  ]}
  helperText="Choose an option from the list."
  placeholder="Choose an option"
/>

Status

To indicate a specific state of the select field, use the status attribute. Possible values are default, success, and error. You can use helperText to provide additional context.

Default State

Success State

Selection successful. Error State

There was an error with your selection.

---
import { Select } from 'free-astro-components'
---

<Select
  label="Default State"
  options={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
  ]}
  status="default"
  placeholder="Select an option"
/>
<Select
  label="Success State"
  options={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2', selected: true },
  ]}
  status="success"
  helperText="Selection successful."
  placeholder="Select an option"
/>
<Select
  label="Error State"
  options={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
  ]}
  status="error"
  helperText="There was an error with your selection."
  placeholder="Select an option"
/>

Props

Attribute	Type	Description	Default
label	`string`	The text label associated with the select field.	-
options	`{ value: string, label: string, selected?: boolean }[]`	The list of options available for selection. The selected property indicates the pre-selected option.	`[{ value: '1', label: 'Option 1' },{ value: '2', label: 'Option 2' },{ value: '3', label: 'Option 3' },]`
placeholder	`string`	A placeholder text displayed when no option is selected.	-
disabled	`boolean`	Whether the select field is disabled.	`false`
helperText	`string`	Additional text to assist the user.	-
status	`default \| success \| error`	The status of the select field.	`default`
class	`string`	CSS class for custom styling.	-
other	`any`	Any other props will be passed to the select element.	-

Accessibility

Keyboard Accessibility: Ensure that users can navigate and interact with the select options using the keyboard.
ARIA Attributes: Use appropriate ARIA attributes such as aria-expanded to indicate the dropdown state and aria-selected for selected options.
Labeling: Provide clear labels for each select field to assist screen reader users.