Input

Como utilizar

import { Input } from '@superlogica/design-system'

() => {
  const [formValues, setFormValues] = useState({ example: '' })

  const handleChange = (e) => {
    return setFormValues({ ...formValues, [e.target.name]: e.target.value })
  }

  return (
    <Input
      label="Exemplo"
      name="example"
      value={formValues.example}
      onChange={handleChange}
    />
  )
}

() => {
  const [formValues, setFormValues] = useState({ example: '' })

  const handleChange = (e) => {
    return setFormValues({ ...formValues, [e.target.name]: e.target.value })
  }

  return (
    <Input
      label="Exemplo"
      name="example"
      value={formValues.example}
      onChange={handleChange}
    />
  )
}

Props

Prop	Tipo	Default	Descrição
color	`string`		Deve conter o Token(do theme) da cor que você deseja como contorno do input
bgColor	`string`		Deve conter o Token(do theme) da cor que você deseja como fundo do input
leftIcon	`node`		Deve receber o componente Icon e é renderizado do lado esquerdo.
rightIcon	`node`		Deve receber o componente Icon e é renderizado do lado direito.
type	`string`	`text`	Aceita os valores text, password e number.
label	`string`	`Informe o label`	Label do input.
message	`string`		Mensagem de erro, caso alguma validação do input retorno erro.
name	`string`		Nome do input.
status	`string`		Deve receber success ou error para sinalizar se o campo está correto ou não após uma validação.
textColor	`string`		Deve conter o Token(do theme) da cor que você deseja como texto do input,
floatingMessage	`bool`	`false`	Caso seja verdadeiro, mensagem de erro se torna flutuante.
textarea	`bool`	`false`	Caso seja verdadeiro, input se torna um textarea.