Input

O componente Input é um componente que recebe dados do usuário.

Importação

import { Input } from '@escaletech/delta'

Utilização

Editor de código

<Input label="Nome Completo" />

<Input label="Nome Completo" />

Resultado

Loading...

Status

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

Editor de código

<> <Input label="Nome Completo" status="success" /> <hr /> <Input label="Nome Completo" status="error" /> <hr /> <Input label="Nome Completo" status="warning" /> </>

<>
<Input label="Nome Completo" status="success" />
<hr />
<Input label="Nome Completo" status="error" />
<hr />
<Input label="Nome Completo" status="warning" />
</>

Resultado

Loading...

Ícones de status

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

Editor de código

<Input label="Nome Completo" status="success" statusIcon={{ success: <FiCheckSquare />}} />

<Input label="Nome Completo" 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'

<Input label="Nome Completo" 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 Input.

Editor de código

<> <Input type='number' label="Telefone" helperText='Apenas números' /> <hr/> <Input type='number' label="Telefone" helperText='Apenas números' status='error'/> </>

<>
  <Input type='number' label="Telefone" helperText='Apenas números' />
  <hr/>
  <Input type='number' label="Telefone" helperText='Apenas números' status='error'/>
</>

Resultado

Loading...

Desabilitado

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

Editor de código

<Input label="Nome Completo" disabled/>

  <Input label="Nome Completo" 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.formFieldBorderColorInputed	Cor da borda quando o componente está em foco
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 input
colors.formFieldLabelColor	Cor do texto da label do input
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	-	✅
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': ReactNode, 'error': ReactNode, 'warning': ReactNode }	-	❌
helperText	Define mensagem de ajuda do componente	string	-	❌

Aceita todos as propriedades suportados por inputs nativos.