Fields

Field layout and shared defaults for form controls.

Stacked

Inline

Stacked

import { Calendar } from 'lucide-react'
import { Button, Fields, Input } from 'regen-ui'

export function IdentityFields() {
  return (
    <Fields className="max-w-[420px]">
      <Fields.Inline>
        <Input label="First name" placeholder="Jane" />
        <Input label="Last name" placeholder="Doe" />
      </Fields.Inline>
      <Input
        label="Date of birth"
        placeholder="mm/dd/yyyy"
        suffix={
          <Button.Icon size="md" title="Open calendar">
            <Calendar />
          </Button.Icon>
        }
      />
    </Fields>
  )
}

Inline

import { Fields, Input } from 'regen-ui'

export function AddressFields() {
  return (
    <Fields.Inline className="max-w-[420px]">
      <Input label="City" placeholder="New York" />
      <Input label="State" placeholder="NY" />
      <Input label="ZIP" placeholder="10013" />
    </Fields.Inline>
  )
}

API Reference

Fields.Props

childrenRequired
TypeReactNode
DefaultNone
Field controls rendered in the group.
variantOptional
Type'default' | 'stacked'
Default'stacked'
Field variant applied to child controls unless they override it: 'default' for external labels or 'stacked' for internal labels.
Inherits HTMLAttributes<HTMLDivElement>.

Fields.Inline.Props

childrenRequired
TypeReactNode
DefaultNone
Field controls rendered in the inline layout.
Inherits HTMLAttributes<HTMLDivElement>.