Select

Como utilizar

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

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

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

  return (
    <Select
      label="Exemplo"
      name="example"
      value={formValues.example}
      onChange={handleChange}
      options={[
        { value: '', name: 'Selecione' },
        { value: 'Opção 1', name: 'Opção 1' },
        { value: 'Opção 2', name: 'Opção 2' },
        { value: 'Opção 3', name: 'Opção 3' }
      ]}
    />
  )
}

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

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

  return (
    <Select
      label="Exemplo"
      name="example"
      value={formValues.example}
      onChange={handleChange}
      options={[
        { value: '', name: 'Selecione' },
        { value: 'Opção 1', name: 'Opção 1' },
        { value: 'Opção 2', name: 'Opção 2' },
        { value: 'Opção 3', name: 'Opção 3' }
      ]}
    />
  )
}

Props

Prop	Tipo	Default	Descrição
name	`string`		Nome do select.
options	`object[]`	[]	Array de objetos com valores name e value. `[{ value: 'Opção 1', name: 'Opção 1' }, ...]`
color	`string`		Deve conter o token(do theme) da cor que você deseja como contorno do select
bgColor	`string`		Deve conter o token(do theme) da cor que você deseja como fundo do select
leftIcon	`node`		Deve receber o componente Icon e é renderizado do lado esquerdo.
label	`string`	`Informe o label`	Label do select.
message	`string`		Mensagem de erro, caso alguma validação do input retorno erro.
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.