TextArea

function Example() {
  const firstname = useField({ name: 'firstname' })

  return (
    <TextArea label="First Name" placeholder="e.g. Max" {...firstname.props} />
  )
}

<TextArea
  name="firstname-invalid"
  label="First Name"
  description="Your firstname please"
  isValid={false}
  errorMessage="You have to enter a name."
  placeholder="e.g., Max"
/>

function Example() {
  const maxLength = 20
  const freeText = useField({
    name: 'freeText',
    validation: {
      'Too long': (val) => val.length <= 20,
    },
    showValidationOn: 'blur',
  })

  return (
    <TextArea label="Free text" maxlength={maxLength} {...freeText.props} />
  )
}

<TextArea name="rows" label="Free text" rows={4} />

<TextArea
  name="firstname-disabled"
  disabled={true}
  label="First Name"
  description="Your firstname please"
  placeholder="e.g., Max"
/>

<TextArea
  loading
  name="firstname-disabled"
  label="First Name"
  description="Your firstname please"
  placeholder="e.g., Max"
/>

<TextArea
  name="firstname-disabled"
  label="First Name"
  description="Your firstname please"
  placeholder="e.g., Max"
  autosize={true}
/>

function Example() {
  const city = useField({ name: 'city' })

  return <TextArea placeholder="e.g. Stockholm" {...city.props} />
}

function Example() {
  const name = useField({ name: 'name' })

  return (
    <TextArea
      mode="compact"
      label="Compact"
      placeholder="Max Mustermann"
      {...name.props}
    />
  )
}