Field

Wrapper for inputs to provide context such as label/help/required etc.

#
Documentation

Wrap your actual input controls with Field to show additional context for the input.

Input label


import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field label="Input label">
      <Input placeholder="Enter text..." />
    </Field>
  );
}

#
Required

Enable the required prop to display an asterisk for required inputs.

Input labelRequired


import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field label="Input label" required>
      <Input placeholder="Enter text..." />
    </Field>
  );
}

The required prop will be available to the input element via a FieldContext.

#
Description

Use the description prop to provide help text for the input.

Input label

Input description


import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field description="Input description" label="Input label">
      <Input placeholder="Enter text..." />
    </Field>
  );
}

#
Error

Use the error prop to display validation or other errors for the input.

Input label

Field is required


import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field error="Field is required" label="Input label">
      <Input placeholder="Enter text..." />
    </Field>
  );
}

The error prop will be available as a boolean to the input element via a FieldContext.

#
Information

Use the info prop to display a help icon with additional context for the input.

Input label


import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field info="This is additional information" label="Input label">
      <Input placeholder="Enter text..." />
    </Field>
  );
}

#
Props

#
Field

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`description` Provide description and help text for the field. `ReactNode`
`error` Display validation or other errors for the input. `ReactNode`
`info` Display a help icon with additional context for the input. `ReactNode`
`inputId` Override the default generated input ID used for associating the label to the input. `string`
`label` The label of the field. `ReactNode`
`labelId` Override the default generated label ID used for associating the controls to the label. `string`
`required` Display an asterisk for required inputs. `false \| true`

#
Changelog

#
0.1.0

Added component