PlayfulInput

This form input component is a primitive component. By default, it only renders a single styled html input element, but when used with the medium scale, the input is wrapped with a label as well.

It can be used to create a fully featured form field that contains an input and other important things a form field needs like a label and error message.

<Spacings.Stack>
  <FormLabel>Name</FormLabel>
  <PlayfulInput valid={valid} />
</Spacings.Stack>

With medium scale

This scale is used with our alternate page layout that shows only a single question in the form of a large heading. For this reason, this component renders a label as a descriptor for the field.

<PlayfulInput label="Name" scale="medium" valid={valid} />

Disabled state

<Spacings.Stack>
  <FormLabel>Name</FormLabel>
  <PlayfulInput valid={valid} disabled />
</Spacings.Stack>

Error state

<Spacings.Stack>
  <FormLabel>Name</FormLabel>
  <PlayfulInput valid={valid} invalid />
</Spacings.Stack>

Error state with medium scale

<PlayfulInput label="Name" scale="medium" valid={valid} invalid />

Props