TextArea

function Example() {
  const [value, setValue] = React.useState('')

  return (
    <TextArea
      name="firstname"
      label="First Name"
      placeholder="e.g. Max"
      value={value}
      onChange={(event) => setValue(event.target.value)}
    />
  )
}

<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 [value, setValue] = React.useState('')
  const isValid = value.length <= maxLength

  return (
    <TextArea
      name="freeText"
      label="Free text"
      maxlength={maxLength}
      value={value}
      onChange={(event) => setValue(event.target.value)}
      isValid={isValid}
      errorMessage={isValid ? undefined : 'Too long'}
    />
  )
}

<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 [value, setValue] = React.useState('')

  return (
    <TextArea
      name="city"
      placeholder="e.g. Stockholm"
      value={value}
      onChange={(event) => setValue(event.target.value)}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState('')

  return (
    <TextArea
      name="name"
      mode="compact"
      label="Compact"
      placeholder="Max Mustermann"
      value={value}
      onChange={(event) => setValue(event.target.value)}
    />
  )
}