---
name: Forms
route: '/forms'
---

# Forms

Let's build some forms! We will use the following compoenents `InputLabel`, `Typography`, `TextField`, `ValidationMessage`

### Examples

import { Playground, PropsTable } from 'docz'
import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Flex, Button, FormField, Typography } from '../core/client/ui/components'

## Simple Form
<Playground>
  <Flex itemGutter="double" direction="column">
    <Typography variant="heading1">Sign up to join the conversation</Typography>

    <FormField>
      <InputLabel>Email Address</InputLabel>
      <TextField fullWidth />
    </FormField>

    <FormField>
      <InputLabel>Username</InputLabel>
      <InputDescription>An identifier displayed on your comments. You may use “_” and “.”</InputDescription>
      <TextField fullWidth />
    </FormField>

    <FormField>
      <InputLabel>Password</InputLabel>
      <InputDescription>Must be at least 8 characters</InputDescription>
      <TextField fullWidth />
    </FormField>

    <FormField>
      <InputLabel>Confirm Password</InputLabel>
      <TextField fullWidth />
    </FormField>

    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
  </Flex>
</Playground>

## Simple Form with error

<Playground>
  <Flex itemGutter="double" direction="column">
    <Typography variant="heading1">Sign up to join the conversation</Typography>

    <FormField>
      <InputLabel>Email Address</InputLabel>
      <TextField fullWidth />
    </FormField>

    <FormField>
      <InputLabel defaultValue="something.com">Username</InputLabel>
      <InputDescription>An identifier displayed on your comments. You may use “_” and “.”</InputDescription>
      <TextField color="error" fullWidth />
      <ValidationMessage fullWidth>Invalid characters. Try again.</ValidationMessage>
    </FormField>


    <FormField>
      <InputLabel>Password</InputLabel>
      <InputDescription>Must be at least 8 characters</InputDescription>
      <TextField fullWidth/>
    </FormField>

    <FormField>
      <InputLabel>Confirm Password</InputLabel>
      <TextField fullWidth/>
    </FormField>

    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
  </Flex>
</Playground>

## Simple Form with CallOut

<Playground>
  <Flex itemGutter="double" direction="column">
    <Typography variant="heading1">Sign up to join the conversation</Typography>
    <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
    <FormField>
      <InputLabel>Email Address</InputLabel>
      <TextField fullWidth/>
    </FormField>

    <FormField>
      <InputLabel defaultValue="something.com">Username</InputLabel>
      <InputDescription>An identifier displayed on your comments. You may use “_” and “.”</InputDescription>
      <TextField fullWidth/>
    </FormField>


    <FormField>
      <InputLabel>Password</InputLabel>
      <InputDescription>Must be at least 8 characters</InputDescription>
      <TextField fullWidth/>
    </FormField>

    <FormField>
      <InputLabel>Confirm Password</InputLabel>
      <TextField fullWidth/>
    </FormField>

    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
  </Flex>
</Playground>
