Text Field

Text field enables the user to interact with input data. They are normally found within a form but can also be part of a modal, search or card.

Best practices

Use placeholders to provide hints or examples of what to enter.
Required fields must be signed with a red asterisk. If all fields are required there is no need to display an asterisk in all of them, but the obligatoriness must be indicated at the top of the page.
The validation of the fields must occur in real time, making it easier for users to complete the task when filling the form.

Text Input types

Text field	Used when the user needs to insert only one line of text.
Text area	Used when the user needs to insert more than a sentence.

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