Text Field

O componente permite ao usuário inserir e interagir com entrada de dados. Normalmente encontrado em formulários, mas também está presente em modais, buscas ou cards.

Boas práticas

Utilize placeholders para dar dicas do conteúdo que deve ser inserido no campo.
Campos obrigatórios devem ser sinalizados com um asterisco vermelho. Se todos os campos são obrigatórios não há a necessidade de apresentar o asterisco em todos eles, mas a obrigatoriedade deve ser indicada no topo da página.
A validação dos campos deve ocorrer em tempo real, facilitando o processo do usuário na hora de completar formulários.

Tipos de Text Input

Text field	Utilizado quando o usuário precisa inserir apenas uma linha de texto.
Text area	Utilizado quando o usuário precisa inserir mais de uma sentença.

Text Field

Name

Password*

Favourite show

Incorrect answer

Decorative icon

Clickable icon

import { Cell, Grid, TextField } from '@lemonade/ui'
import React from 'react'

function TextFieldDemo() {
  return (
    <Grid>
      <Cell xs={12} md={6}>
        <TextField
          label='Name'
          name='empty'
          placeholder='Ex: Daenerys Stormborn of the House Targaryen First of Her Name'
        />
      </Cell>
      <Cell xs={12} md={3}>
        <TextField label='Email' name='disabled' disabled />
      </Cell>
      <Cell xs={12} md={3}>
        <TextField label='Password' name='password' type='password' required />
      </Cell>
      <Cell xs={12} md={4}>
        <TextField label='Favourite show' name='password' defaultValue='Game of Thrones' error='Incorrect answer' />
      </Cell>
      <Cell xs={12} md={4}>
        <TextField label='Decorative icon' type='search' name='search' icon='zoomOutline' />
      </Cell>
      <Cell xs={12} md={4}>
        <TextField label='Clickable icon' type='search' name='search' icon='zoomOutline' onIconClick={console.log} />
      </Cell>
    </Grid>
  )
}

export default TextFieldDemo

Text Area

Post body*

Comment

Invalid comment

import { Cell, Grid, TextArea } from '@lemonade/ui'
import React from 'react'

function TextAreaDemo() {
  return (
    <Grid>
      <Cell xs={12} md={12}>
        <TextArea label='Post body' name='empty' placeholder='Enter the body of your post' required />
      </Cell>
      <Cell xs={12} md={6}>
        <TextArea label='Comment' name='disabled' disabled />
      </Cell>
      <Cell xs={12} md={6}>
        <TextArea label='Comment' name='comment' error='Invalid comment' />
      </Cell>
    </Grid>
  )
}

export default TextAreaDemo