TextInput

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

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

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

  return <TextInput label="Age" type="number" {...age.props} />
}

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

  return (
    <TextInput
      label="Search"
      type="search"
      onClear={() => search.update({ value: '' })}
      {...search.props}
    />
  )
}

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

  return <TextInput label="Date" type="datetime-local" {...date.props} />
}

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

<TextInput
  disabled
  name="firstname-disabled"
  label="First Name"
  value="foo"
  description="Your firstname please"
  placeholder="e.g., Max"
  onChange={() => null}
/>

<TextInput
  loading
  name="firstname-loading"
  label="First Name"
  description="Your firstname please"
  placeholder="e.g., Max"
  onChange={() => null}
/>

<Box space={2}>
  <TextInput
    name="amount-suffix"
    label="Amount"
    suffix="SEK"
    type="number"
    onChange={() => null}
  />
  <TextInput
    name="distance-suffix"
    label="Distance"
    suffix="km"
    loading
    type="number"
    onChange={() => null}
  />
</Box>

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

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

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

  return (
    <Box space={2}>
      <TextInput
        mode="compact"
        label="Name"
        placeholder="Max Mustermann"
        {...name.props}
      />
      <TextInput
        name="compact-unlabelled"
        mode="compact"
        placeholder="Unlabelled"
        onChange={() => null}
      />
      <TextInput
        name="compact-loading"
        mode="compact"
        placeholder="Unlabelled"
        loading
        onChange={() => null}
      />
      <TextInput
        name="compact-disabled"
        mode="compact"
        placeholder="Unlabelled"
        label="Compact disabled"
        disabled
        onChange={() => null}
      />
      <TextInput
        name="compact-suffix"
        mode="compact"
        label="Compact with suffix"
        suffix="km"
        onChange={() => null}
      />
    </Box>
  )
}