SelectField

SelectField renderiza un elemento <select> nativo dentro de un contenedor estilizado con etiqueta flotante. Acepta un array estático de opciones { label, value } y llama a onChange con el valor string seleccionado. Los atributos nativos del select pueden pasarse via rest-props spread.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | Sí | — | Valor seleccionado actualmente. | | options | { label: string; value: string }[] | Sí | — | Array de opciones a renderizar dentro del <select>. | | onChange | (value: string) => void | No | — | Llamado con el value string de la opción seleccionada cuando la selección cambia. | | label | string | No | — | Etiqueta flotante mostrada sobre el select. | | description | string | No | — | Texto de ayuda mostrado debajo del componente. | | disabled | boolean | No | — | Deshabilita el elemento select. | | containerStyle | React.CSSProperties | No | — | Estilos del div contenedor exterior. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | inputStyle | React.CSSProperties | No | — | Estilos aplicados directamente al elemento <select>. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del div contenedor exterior. | | id | string | No | — | Atributo id del <select>. |

Uso

Básico

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

const options = [
  { label: 'Activo', value: 'active' },
  { label: 'Inactivo', value: 'inactive' },
  { label: 'Pendiente', value: 'pending' },
];

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

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

Select deshabilitado

<SelectField
  label="País"
  value="AR"
  options={[{ label: 'Argentina', value: 'AR' }]}
  disabled={true}
  description="El país no puede modificarse después de la creación."
/>