Inputs

Son los campos que los usuarios rellenan con diferentes tipos de información.

Input de texto

Input de contraseña

Input de números

Input para cantidades monetarias

MXN

Text area

Props comunes

Todos los tipos de input comparten las siguientes props:

`label`	Es el texto que contendrá la etiqueta label asociada al input. Si no se especifica, no se agrega la etiqueta label al input.
`id`	Es el id unico que tendra el input y servirá para asociar el input con la etiqueta label.
`name`	El atributo name del input.
`value`	Permite especificar el valor del atributo value del input.
`handleChange`	Recibe una función que se ejecuta cuando el usuario ingresa información en el input.
`errorStatus`	Recibe un string que permite cambiar el color del borde del input y dar retroalimentación al usuario de si hay errores de validacion entre otros. Los valores disponibles son: `success` `danger` `warning` `primary` `purple` `default` Para ver como luce cada opcion revisa la sección Ejemplos. Si no se especifica, su valor por defecto es `default`.
`validation`	Es texto que se puede colocar debajo del input para dar retroalimentación al usuario sobre validaciones u otras operaciones. El texto tendra un color diferente dependiendo de la propiedad `errorStatus`.
`placeholder`	Es el texto que contendrá la propiedad `placeholder` del input.
`disabled`	Recibe un valor booleano que permite deshabilitar el input impidiendo que usuario pueda ingresar información.

Text Input

Input preparado para recibir texto, incluido soporte para ingresar emails.

Text input:

Utilización

import { TextInput } from "firefly-components/inputs";

<TextInput
    placeholder="Este es un input de texto"
    label="Text input:"
/>

Props adicionales

type Es el tipo de input. Puede ser text o email.

Password input

Input preparado para recibir contraseñas de usuario.

Password input:

Utilización

import { PasswordInput } from "firefly-components/inputs";

<PasswordInput
    placeholder="Este es un input de contraseñas"
    label="Password input:"
    name="pass"
    value={form.pass}
    handleChange={handleChange}
/>

Input de números

Input que recibe cantidades numéricas enteras.

Number input:

Utilización

import { NumberInput } from "firefly-components/inputs";

<NumberInput
    placeholder="Este es un input de números"
    label="Number input:"
    name="number"
    min={0}
    value={form.number}
    handleChange={handleChange}
/>

Props adicionales

`min`	Recibe un número entero que indica el valor mínimo que puede ingresarse en el input. Si no se especifica, su valor por defecto es `0`.
`max`	Recibe un número entero que indica el valor máximo que puede ingresarse en el input.
`step`	Recibe un número entero que indica la cantidad que se incrementa cuando se hace clic en los botones `+/-`. Si no se especifica, su valor por defecto es `1`.

Input de cantidades monetarias

Input que recibe cantidades monetarias.

Money input:

MXN

Utilización

import { MoneyInput } from "firefly-components/inputs";

<MoneyInput
    placeholder="Input de cantidades monetarias"
    label="Money input:"
/>

Text Area

Input que permite ingresar textos descriptivos.

Text area input:

Utilización

import { TextArea } from "firefly-components/inputs";

<TextArea
    placeholder="Description goes here..."
    label="Text area input:"
/>

Props adicionales

rows Recibe un número entero que indica el numeros de filas que tendra el text area. Si no se especifica, su valor por defecto es 4.

Ejemplos

Usando errorStatus

`errorStatus="success"`
`errorStatus="danger"`
`errorStatus="warning"`
`errorStatus="primary"`
`errorStatus="purple"`
`errorStatus="default"errorStatus=""`

Usando errorStatus y validation

`errorStatus="success"validation="Este es un texo de validación"`	Este es un texo de validación
`errorStatus="danger"validation="Este es un texo de validación"`	Este es un texo de validación
`errorStatus="warning"validation="Este es un texo de validación"`	Este es un texo de validación
`errorStatus="primary"validation="Este es un texo de validación"`	Este es un texo de validación
`errorStatus="purple"validation="Este es un texo de validación"`	Este es un texo de validación
`errorStatus="default"validation="Este es un texo de validación"`	Este es un texo de validación