SelectField

SelectField renders a native <select> element inside a styled container with a floating label. It accepts a static array of { label, value } options and calls onChange with the selected value string. Native select attributes can be passed via the rest-props spread.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | Currently selected value. | | options | { label: string; value: string }[] | Yes | — | Array of options to render inside the <select>. | | onChange | (value: string) => void | No | — | Called with the selected option's value string when the selection changes. | | label | string | No | — | Floating label rendered above the select box. | | description | string | No | — | Helper text rendered below the component. | | disabled | boolean | No | — | Disables the select element. | | containerStyle | React.CSSProperties | No | — | Styles applied to the outer container div. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | inputStyle | React.CSSProperties | No | — | Styles applied directly to the <select> element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the outer container div. | | id | string | No | — | id attribute on the <select>. |

Usage

Basic

import React, { useState } from 'react';
import SelectField from '@/components/fields/SelectField';

const options = [
  { label: 'Active', value: 'active' },
  { label: 'Inactive', value: 'inactive' },
  { label: 'Pending', value: 'pending' },
];

export default function Example() {
  const [status, setStatus] = useState('active');

  return (
    <SelectField
      label="Status"
      value={status}
      options={options}
      onChange={setStatus}
    />
  );
}

Disabled select

<SelectField
  label="Country"
  value="AR"
  options={[{ label: 'Argentina', value: 'AR' }]}
  disabled={true}
  description="Country cannot be changed after creation."
/>