Form Control

The Form Control groups a label, input, and helper/error text into a single accessible unit.

Basic Usage

...

import { FormCtrl } from "@paramanu/forms-react"

export default function App() {
  return (
    <FormCtrl helperText="Enter your name">
      <label>Name</label>
      <input />
    </FormCtrl>
  )
}

<div class="pm-form-ctrl pm-form-ctrl--vertical" role="group">...</div>

Accessibility

Feature	Detail
`role="group"`	Groups label, input, and messages
Error text	Shown only when `invalid` is true
Helper text	Shown when not invalid

Props

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Layout direction
`invalid`	`boolean`	`false`	Invalid state
`disabled`	`boolean`	`false`	Disabled state
`required`	`boolean`	`false`	Required state
`helperText`	`ReactNode`	—	Helper text below input
`errorText`	`ReactNode`	—	Error text shown when invalid