Field

import { Field, Input, Label } from '@vtex/shoreline'

export default function Example() {
  return (
    <Field>
      <Label>Label</Label>
      <Input />
    </Field>
  )
}

import { Field, FieldError, Input, Label } from '@vtex/shoreline'

export default function Example() {
  return (
    <Field error>
      <Label>Label</Label>
      <Input />
      <FieldError>Error message</FieldError>
    </Field>
  )
}

import { Field, FieldDescription, Input, Label } from '@vtex/shoreline'

export default function Example() {
  return (
    <Field>
      <Label>Label</Label>
      <Input />
      <FieldDescription>Short description</FieldDescription>
    </Field>
  )
}

import {
  Field,
  FieldDescription,
  FieldError,
  Input,
  Label,
} from '@vtex/shoreline'

export default function Example() {
  return (
    <Field space="large" error>
      <Label>Label</Label>
      <Input />
      <FieldDescription>Short description</FieldDescription>
      <FieldError>Error message</FieldError>
    </Field>
  )
}

import { Field, FieldDescription, Textarea, Label } from '@vtex/shoreline'

export default function Example() {
  return (
    <Field>
      <Label>Text area field</Label>
      <Textarea />
      <FieldDescription>Short description</FieldDescription>
    </Field>
  )
}

import { useState } from 'react'
import {
  Field,
  FieldError,
  FieldDescription,
  Input,
  Label,
} from '@vtex/shoreline'

export default function Example() {
  const [value, setValue] = useState('Initial value')
  const [error, setError] = useState<string | null>(null)

  return (
    <Field error={!!error}>
      <Label>Controlled input field</Label>
      <Input
        value={value}
        onChange={(val) => {
          if (val === 'error') {
            setError("Please use a value that isn't 'error'")
            setValue(val)
            return
          }

          setError(null)
          setValue(val)
        }}
      />
      <FieldDescription>Value shouldn't be "error"</FieldDescription>
      <FieldError>{error}</FieldError>
    </Field>
  )
}

import { useState } from 'react'
import {
  Field,
  FieldDescription,
  Textarea,
  Label,
  FieldCharCounter,
  FieldError,
  Flex,
} from '@vtex/shoreline'

export default function Example() {
  const [value, setValue] = useState('')

  return (
    <Field>
      <Label>Count</Label>
      <Textarea value={value} onChange={setValue} maxLength={120} />
      <Flex justify="space-between">
        <FieldDescription>Short description</FieldDescription>
        <FieldCharCounter count={String(value).length} limit={120} />
      </Flex>
      <FieldError>Error Message</FieldError>
    </Field>
  )
}