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 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
required Display an asterisk for required inputs. false \| true

#
Changelog

#
0.1.0

Added component

DropdownMenu Heading