Skip to main content

Fields Introduction

The "Fields" API is Atomic Elements composition API for building interactive forms. It is designed to be composable and flexible, giving you a lot of control over the look and feel of your inputs, while still providing the necessary accessibility features.

For example, the TextField components handles the details of managing the input and accessibility, while you provide the semantic structure of the field.

Enter your name

import React, { useState } from "react";
import {
  TextField,
  Label,
  Message,
  ErrorMessage,
  Input,
} from "@atomicjolt/atomic-elements";

function MyComponent() {
  const [name, setName] = useState("John Doe");

  return (
    <TextField value={name} onChange={setName}>
      <Label>Name</Label>
      <Message>Enter your name</Message>
      <Input />
      <ErrorMessage>Invalid name</ErrorMessage>
    </TextField>
  );
}

Group Fields & Buttons​

Because you are defining the markup for the field, you can customize the layout and appearance of the field to suit your needs. For example, you can use the Group component to create a field with a button and input:

Enter your name

<TextField size="large">
  <Label>Name</Label>
  <Message>Enter your name</Message>
  <Group isMerged>
    <Input />
    <Button variant="border">Save</Button>
  </Group>
  <ErrorMessage>Invalid name</ErrorMessage>
</TextField>

ComboInput​

The ComboInput component wraps multiple elements into a single visual input. This is useful for creating complex inputs, such as a date picker or a search input.

<TextField size="large">
  <ComboInput padding="left">
    <Input placeholder="search" />
    <IconButton icon="search" variant="ghost" />
  </ComboInput>
  <ErrorMessage>Invalid name</ErrorMessage>
</TextField>