Checkbox

Os Checkbox permitem ao usuário selecionar um ou mais itens de um conjunto.

Importação

import { Checkbox, CheckboxLabel } from '@escaletech/delta'

Utilização

Você pode usar o Checkbox sozinho, customizando do jeito que quiser ou usar o CheckboxLabel com uma label para uma label já estilizada.

Editor de código

<div style={{background: 'white', padding: '20px'}}> <Checkbox /> <hr /> <label style={{ display: 'flex', flexDirection: 'row', gap: '16px', alignItems: 'center' }}> <Checkbox /> <Paragraph color='$neutralDarkest'> Declaro que li e aceito o <Link href='#'>termo</Link> </Paragraph> </label> <hr /> <CheckboxLabel label='Label'> Descrição da opção de checkbox </CheckboxLabel> </div>

<div style={{background: 'white', padding: '20px'}}>
  <Checkbox />
  <hr />

  <label style={{ display: 'flex', flexDirection: 'row', gap: '16px', alignItems: 'center' }}>
    <Checkbox />
    <Paragraph color='$neutralDarkest'>
      Declaro que li e aceito o <Link href='#'>termo</Link>
    </Paragraph>
  </label>

  <hr />
  
  <CheckboxLabel label='Label'>
    Descrição da opção de checkbox
  </CheckboxLabel>
</div>

Resultado

Loading...

Desabilitado

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

Editor de código

<div style={{background: 'white', padding: '20px'}}> <label style={{ display: 'flex', flexDirection: 'row', gap: '16px', alignItems: 'center' }}> <Checkbox disabled /> <Paragraph color='$neutralDarkest'> Declaro que li e aceito o <Link href='#'>termo</Link> </Paragraph> </label> <hr/> <CheckboxLabel label='Label' disabled> Descrição da opção de checkbox </CheckboxLabel> </div>

<div style={{background: 'white', padding: '20px'}}>
  <label style={{ display: 'flex', flexDirection: 'row', gap: '16px', alignItems: 'center' }}>
    <Checkbox disabled />
    <Paragraph color='$neutralDarkest'>
      Declaro que li e aceito o <Link href='#'>termo</Link>
    </Paragraph>
  </label>
  <hr/>
  <CheckboxLabel label='Label' disabled>
    Descrição da opção de checkbox
  </CheckboxLabel>
</div>

Resultado

Loading...

Status de sucesso

Passe a propriedade status com valor success para que o Checkbox fique verde.

Editor de código

<div style={{background: 'white', padding: '20px'}}> <CheckboxLabel label='Label' status='success' checked> Descrição da opção de checkbox </CheckboxLabel> </div>

<div style={{background: 'white', padding: '20px'}}>
  <CheckboxLabel label='Label' status='success' checked>
    Descrição da opção de checkbox
  </CheckboxLabel>
</div>

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',
    inputSuccessColor: 'white'
  },
  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.formFieldLabelColorDisabled	Cor do texto quando o componente está desabilitado
colors.inputLabelColor	Cor do texto da label do componente
colors.inputLabelColorDisabled	Cor do texto da label do componente quando o componente está desabilitado
fonts.formFieldFontFamily	Família de fontes de texto do componente

Props

Checkbox

Aceita todos as propriedades suportados por inputs do tipo checkbox nativos.

CheckboxLabel

Propriedade	Descrição	Tipo	Padrão	Obrigatório
label	Label do checkbox	string	-	✅
children	Descrição da opção	ReactNode	-	❌
status	Se for success, o componente ficará verde.	success, default	default	❌
disabled	Se for true, o componente será desabilitado.	boolean	false	❌

Aceita todos as propriedades suportados por inputs do tipo checkbox nativos.