¿Qué es el componente SelectorField?

SelectorField es un componente de selección (dropdown) altamente personalizable: con soporte para iconos, validación, control programático y múltiples estados de estilo.

¿Cómo se utiliza el SelectorField?

Para usar el componente, importa la clase y configura sus propiedades:

import SelectorField, { SelectorFieldStyle, SelectorFieldController } from "@seigenta/TypesCraft/widgets/selectorField";
import { Icon } from "@seigenta/TypesCraft/widgets";
import { Color, Size } from "@seigenta/TypesCraft/widgets/utils";

// Uso básico
new SelectorField({
    options: [
        { value: "1", label: "Opción 1" },
        { value: "2", label: "Opción 2" }
    ],
    placeholder: "Selecciona una opción",
    onChange: (value) => console.log(value)
})
          

Propiedades del componente

SelectorField acepta estas propiedades:

• options: SelectorFieldOption[] - Opciones del dropdown (requerido)
• label?: Widget|string - Etiqueta del campo
• leadingIcon?: Widget - Icono/widget al inicio
• trailingIcon?: Widget - Icono/widget al final
• placeholder?: string - Texto placeholder
• onChange?: (value: string) => void - Callback al cambiar valor
• validation?: (value: string) => string - Función de validación
• controller?: SelectorFieldController - Controlador externo
• style?: SelectorFieldStyle - Estilo base
• styleHover?: SelectorFieldStyle - Estilo hover
• styleFocus?: SelectorFieldStyle - Estilo focus

SelectorFieldStyle - Propiedades de estilo

Configura el estilo del selector:

• inputBackgroundColor?: Color - Color de fondo
• borderStyle?: BorderStyle - Estilo del borde
• radiusBorder?: Size - Radio de borde
• width?: Size - Ancho del campo
• height?: Size - Alto del campo
• labelStyle?: TextStyle - Estilo de la etiqueta
• inputStyle?: TextStyle - Estilo del texto
• dropdownArrowStyle?: Css - Estilo de la flecha

Ejemplos de uso

Ejemplo básico con validación:

new SelectorField({
    label: "País",
    options: [
        { value: "cl", label: "Chile" },
        { value: "ar", label: "Argentina" },
        { value: "pe", label: "Perú" }
    ],
    placeholder: "Selecciona tu país",
    required: true,
    validation: (value) => !value ? "Debes seleccionar un país" : "",
    autoValidate: AutoValidateMode.onBlur
})
          

Ejemplo avanzado con controlador y estilos:

const controller = new SelectorFieldController();

new SelectorField({
    label: "Tema",
    leadingIcon: new Icon({ icon: "palette" }),
    options: [
        { value: "light", label: "Claro" },
        { value: "dark", label: "Oscuro" },
        { value: "system", label: "Sistema" }
    ],
    controller,
    style: new SelectorFieldStyle({
        inputBackgroundColor: Color.hex("#ffffff"),
        borderStyle: BorderStyle.all(Size.px(1),
        radiusBorder: Size.px(8),
        width: Size.px(300),
        dropdownArrowStyle: new Css({ color: "#666" })
    }),
    styleHover: new SelectorFieldStyle({
        borderStyle: BorderStyle.all(Size.px(1), 
        borderColor: Color.hex("#6200ee")
    })
})

// Cambiar valor programáticamente
controller.value = "dark";
          

Comportamiento

El SelectorField:

• Genera un dropdown nativo accesible
• Soporta validación en diferentes eventos (change, blur, focus)
• Permite control programático mediante SelectorFieldController
• Maneja iconos leading/trailing personalizables
• Proporciona múltiples estados de estilo (normal, hover, focus, error)