Autocomplete

O componente Autocomplete é um componente que recebe dados do usuário e sugere valores.

Importação

import { Autocomplete } from '@escaletech/delta'

Utilização

Editor de código

<Autocomplete label="Cidade" options={[ { label: 'São Paulo', value: 'São Paulo' }, { label: 'Rio de Janeiro', value: 'Rio de Janeiro' }, { label: 'Salvador', value: 'Salvador' }, ]} />

<Autocomplete label="Cidade" options={[
  {
    label: 'São Paulo',
    value: 'São Paulo'
  },
  {
    label: 'Rio de Janeiro',
    value: 'Rio de Janeiro'
  },
  {
    label: 'Salvador',
    value: 'Salvador'
  },
]} />

Resultado

Loading...

Status

Você pode definir o status do Input entre 'success', 'warning' e 'error'.

Editor de código

<> <Autocomplete label="Cidade" options={[ { label: 'São Paulo', value: 'São Paulo' }, { label: 'Rio de Janeiro', value: 'Rio de Janeiro' }, { label: 'Salvador', value: 'Salvador' } ]} status="success" /> <hr /> <Autocomplete label="Linguagem" options={[ { label: 'JavaScript', value: 'JavaScript' }, { label: 'Python', value: 'Python' }, { label: 'Java', value: 'Java' } ]} status="error" /> <hr /> <Autocomplete label="Opção" options={[ { label: 'Opção 1', value: 'Opção 1' }, { label: 'Opcão 2', value: 'Opcão 2' }, { label: 'Opção 3', value: 'Opção 3' } ]} status="warning" /> </>

<>
<Autocomplete
  label="Cidade"
  options={[
    {
      label: 'São Paulo',
      value: 'São Paulo'
    },
    {
      label: 'Rio de Janeiro',
      value: 'Rio de Janeiro'
    },
    {
      label: 'Salvador',
      value: 'Salvador'
    }
  ]}
  status="success" />
<hr />
<Autocomplete
  label="Linguagem"
  options={[
    {
      label: 'JavaScript',
      value: 'JavaScript'
    },
    {
      label: 'Python',
      value: 'Python'
    },
    {
      label: 'Java',
      value: 'Java'
    }
  ]}
  status="error"
/>
<hr />
<Autocomplete
  label="Opção"
  options={[
    {
      label: 'Opção 1',
      value: 'Opção 1'
    },
    {
      label: 'Opcão 2',
      value: 'Opcão 2'
    },
    {
      label: 'Opção 3',
      value: 'Opção 3'
    }
  ]}
  status="warning"
/>
</>

Resultado

Loading...

Ícones

Você pode substituir os ícones de status do componente Autocomplete usando a propriedade statusIcon.

Editor de código

<Autocomplete label="Cidade" options={[]} status="success" statusIcon={{ success: <FiCheckSquare />}} />

<Autocomplete label="Cidade" options={[]} status="success" statusIcon={{ success: <FiCheckSquare />}} />

Resultado

Loading...

Neste exemplo estamos usando a popular biblioteca de icones react-icons, mas você também pode usar seus próprios ícones como no exemplo abaixo:

import { ReactComponent as MeuIcone } from 'caminho_do_svg'

<Autocomplete label="Cidade" options={[]} status="success" statusIcon={{ success: <MeuIcone />}} />

Mensagem de ajuda

A propriedade helperTextpode ser usada para fornecer feedback ao usuário sobre o erro, alerta ou ajuda.

Veja que a cor do texto depende do status do Autocomplete.

Editor de código

<> <Autocomplete label="Cidade" options={[]} label="Telefone" helperText='Apenas números' /> <hr/> <Autocomplete label="Cidade" options={[]} label="Telefone" helperText='Apenas números' status='error'/> </>

<>
  <Autocomplete label="Cidade" options={[]} label="Telefone" helperText='Apenas números' />
  <hr/>
  <Autocomplete label="Cidade" options={[]} label="Telefone" helperText='Apenas números' status='error'/>
</>

Resultado

Loading...

Disabled

Passe a propriedade disabled para mostrar que o Autocomplete está desabilitado. Por padrão é false.

Editor de código

<Autocomplete label="Cidade" options={[]} disabled />

  <Autocomplete label="Cidade" options={[]} disabled />

Resultado

Loading...

Customização

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  colors: {
    // customiza as cores de fundo e texto do componente
    formFieldBackgroundColorDisabled: 'red',
    formFieldLabelColor: 'gray'
  },
  fonts: {
    // customiza a familia de fonte do componente
    formFieldFontFamily: 'Georgia'
  }
})

Tokens

Token	Descrição
colors.formFieldBackgroundColorDisabled	Cor de fundo quando o componente está desabilitado
colors.formFieldBorderColor	Cor da borda do componente
colors.formFieldBorderColorHover	Cor da borda quando o cursor do mouse está sobre o componente
colors.formFieldBorderColorDisabled	Cor da borda quando o componente está desabilitado
colors.formFieldColorDisabled	Cor do texto quando o componente está desabilitado
colors.formFieldColor	Cor do valor do Autocomplete
colors.formFieldLabelColor	Cor do texto da label do Autocomplete
colors.formFieldLabelColorHover	Cor do texto da label quando o cursor do mouse está sobre o componente
colors.formFieldLabelColorActive	Cor do texto da label quando o componente está em foco
colors.formFieldSuccessColor	Cor de sucesso
colors.formFieldWarningColor	Cor de atenção
colors.formFieldErroColor	Cor de erro
fonts.formFieldFontFamily	Família de fontes de texto do componente

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
label	Define o texto da label do componente	string	-	✅
options	Define os valores sugeridos ao usuário	array	-	✅
disabled	Se for true, o componente será desabilitado.	boolean	false	❌
status	Define status do componente	'success', 'error', 'warning'	-	❌
statusIcon	Define o ícone exibido de acordo com o status do componente	{ 'success': JSX.Element, 'error': JSX.Element, 'warning': JSX.Element }	-	❌
helperText	Define mensagem de ajuda do componente	string	-	❌

Aceita todos as propriedades suportados por inputs nativos.