Select

Un input que permite seleccionar una opción de una lista. La funcionalidad de este componente esta hecha usando la librería React-select ✅. Una librería para crear Selects accesibles y customizables.

Selecciona un sabor:

Selecciona una opción

Utilización

import { SelectInput } from "firefly-components/select"; 

<SelectInput
    placeholder="Selecciona una opción"
    label="Selecciona un sabor:"
    name="select"
    id="firefly-select"
    options={options}
    value={form.select}
    handleChange={handleChange}
/>

Props

`label`	Es el texto que contendrá la etiqueta label asociada al select. Si no se especifica, no se agrega la etiqueta label al select.
`id`	Es el id único que tendrá el select y servirá para asociar el input con la etiqueta label.
`name`	El atributo name del select.
`value`	Permite especificar el valor del atributo value del select este valor debe coincidir con el valor `value` de alguna de las opciones del select. Mira las sección Opciones del select para saber más sobre agregar opciones al select.
`handleChange`	Recibe una función que se ejecuta cuando el usuario selecciona alguna opción del select.
`errorStatus`	Recibe un string que permite cambiar el color del borde del select y dar retroalimentación al usuario de si hay errores de validación entre otros. Los valores disponibles son: `success` `danger` `warning` `primary` `purple` `default` Para ver como luce cada opción revisa la sección Ejemplos. Si no se especifica, su valor por defecto es `default`.
`validation`	Es texto que se puede colocar debajo del select para dar retroalimentación al usuario sobre validaciones u otras operaciones. El texto tendrá un color diferente dependiendo de la propiedad `errorStatus`.
`placeholder`	Es el texto que se muestra por defecto cuando no hay ninguna opción seleccionada.
`disabled`	Recibe un valor booleano que permite deshabilitar el select impidiendo que usuario pueda ingresar información.
`loading`	Recibe un valor booleano que permite mostrar un loader en el select para indicar que se están cargando datos de forma asíncrona.
`options`	Recibe un array con las opciones del select. Para saber mas sobre como se usa esta prop mira la sección Opciones del select

Opciones del select

Para agregar opciones al select se usa la prop options. Esta prop recibe un array con las opciones. Un ejemplo de este array se muestra a continuación:

const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
]

Como puede verse, el array esta compuesto de objetos que representan las opciones del select. Cada uno de los objetos tiene unas propiedades particulares que se explican a continuación:

`value`	Actúa como un identificador único para la opción. Esta propiedad actúa igual que la propiedad `value` de una etiqueta `option`.
`label`	Es el texto de cada opción.