Field

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

#
Documentation

#
Usage

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 label

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.

Name	Type
asChild	`false \| true`
description	`string`
error	`string`
id	`string`
info	`string`
label	`string`
required	`false \| true`

#
Changelog

#
0.1.0

Added component

Checkbox Input