Field

The label, help text and error around your own input.

Image focus

Horizontal focal point of the hero image

Field.tsx

import {Field} from 'alinea/components'

export function FieldExample() {
  return (
    <Field
      label="Image focus"
      description="Horizontal focal point of the hero image"
      htmlFor="focus"
      style={{width: 280}}
    >
      <input id="focus" type="range" min={0} max={100} defaultValue={40} />
    </Field>
  )
}

Props

`<Field>`

Renders the label, description and error around a form control. All inputs in this library render a Field, use it directly to give a custom control the same chrome.

PropTypeDefaultDescription

htmlForstringDefault –Id of the control the label describes, not needed inside our inputs

labelReactNodeDefault –

descriptionReactNodeDefault –

errorReactNodeDefault –

requiredbooleanDefault –

disabledbooleanDefault –

readOnlybooleanDefault –

iconIconType | ReactElementDefault –

sharedbooleanDefault –Marks the field as shared between translations