Form Atoms

ImportCC

Available via @stackmates/ui-forms

FormInput

Text input with label, validation, and error display. Wraps TanStack Field internally.

Name

FormInputProps

Prop	Type	Default	Description
form*	FormApi	—	TanStack Form instance
name*	keyof TFormData	—	Field name in form data
label*	string	—	Field label text
type	HTMLInputTypeAttribute	'text'	Input type (text, email, password, etc.)
placeholder	string	—	Placeholder text
required	boolean	—	Show required indicator
helpText	string	—	Help text below input
disabled	boolean	—	Disable the input
size	'sm' \| 'md' \| 'lg'	'md'	Input size variant
autoComplete	string	—	Browser autocomplete hint
autoFocus	boolean	—	Focus on mount

Installation

typescript

import { FormInput } from '@stackmates/ui-forms';

Usage

Basic

tsx

<FormInput<FormData>
  form={form}
  name="email"
  label="Email"
  type="email"
  placeholder="you@example.com"
/>

Accessibility

Label auto-linked via htmlFor
Error messages use aria-describedby
Required fields marked with aria-required
Help text linked via aria-describedby

FormSelect FormTextarea FormMoneyInput

FormSelect

Dropdown select with TanStack Form integration. Uses native <select> for accessibility.

Country

FormSelectProps

Prop	Type	Default	Description
form*	FormApi	—	TanStack Form instance
name*	keyof TFormData	—	Field name in form data
label*	string	—	Field label text
options*	{ value: string; label: string }[]	—	Select options array
placeholder	string	—	Placeholder text
required	boolean	—	Show required indicator
helpText	string	—	Help text below select
disabled	boolean	—	Disable the select
size	'sm' \| 'md' \| 'lg'	'md'	Select size variant

Installation

typescript

import { FormSelect } from '@stackmates/ui-forms';

Usage

With options

tsx

<FormSelect<FormData>
  form={form}
  name="country"
  label="Country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
  ]}
/>

Accessibility

Uses native <select> semantics
Keyboard navigable with arrow keys
Label linked via htmlFor
Error messages use aria-describedby

FormInput FormSelectRx

FormTextarea

Multi-line text input with TanStack Form integration. Supports rows and maxLength.

Bio

FormTextareaProps

Prop	Type	Default	Description
form*	FormApi	—	TanStack Form instance
name*	keyof TFormData	—	Field name in form data
label*	string	—	Field label text
placeholder	string	—	Placeholder text
rows	number	4	Number of visible text rows
maxLength	number	—	Maximum character count
required	boolean	—	Show required indicator
helpText	string	—	Help text below textarea
disabled	boolean	—	Disable the textarea
size	'sm' \| 'md' \| 'lg'	'md'	Textarea size variant

Installation

typescript

import { FormTextarea } from '@stackmates/ui-forms';

Usage

Basic

tsx

<FormTextarea<FormData>
  form={form}
  name="bio"
  label="Bio"
  placeholder="Tell us about yourself..."
/>

With character limit

tsx

<FormTextarea<FormData>
  form={form}
  name="notes"
  label="Notes"
  maxLength={500}
  rows={6}
/>

Accessibility

Label linked via htmlFor
Error messages use aria-describedby
Resizable by default for user comfort

FormInput MessageComposer

RawInput

Lowest-level input primitive. Renders a styled <input> with optional TanStack Form fieldApi for automatic value/onChange/onBlur wiring. Use this when you need full control over layout and labeling, or when building custom form field molecules.

Sizes

States

RawInputProps

Prop	Type	Default	Description
fieldApi	AnyFieldApi	—	Optional TanStack Form field API for automatic state management
size	'sm' \| 'md' \| 'lg'	'md'	Input size variant
hasError	boolean	false	Show error styling (red border and focus ring)
type	HTMLInputTypeAttribute	'text'	HTML input type (text, email, password, etc.)
placeholder	string	—	Placeholder text
disabled	boolean	—	Disable the input

Installation

typescript

import { RawInput } from '@stackmates/ui-forms';

Usage

Standalone

tsx

<RawInput
  placeholder="Enter value"
  size="md"
/>

With TanStack Field API

tsx

<form.Field name="email">
  {(field) => (
    <RawInput
      fieldApi={field}
      type="email"
      placeholder="you@example.com"
    />
  )}
</form.Field>

Accessibility

Forwards ref for external focus management
Sets aria-invalid automatically when fieldApi has errors
Supports aria-describedby for linked help/error text

FormInput FormField

RawCheckbox

Checkbox primitive with optional TanStack Form fieldApi binding. Renders a styled native <input type="checkbox"> with size variants and error state. Use inside a FormField or custom layout when the higher-level FormCheckbox does not fit.

RawCheckboxProps

Prop	Type	Default	Description
fieldApi	AnyFieldApi	—	Optional TanStack Form field API for automatic state management
size	'sm' \| 'md' \| 'lg'	'md'	Checkbox size variant
hasError	boolean	false	Show error styling (red border and focus ring)
checked	boolean	—	Controlled checked state (when not using fieldApi)
disabled	boolean	—	Disable the checkbox

Installation

typescript

import { RawCheckbox } from '@stackmates/ui-forms';

Usage

Standalone with label

tsx

<label className="flex items-center gap-2">
  <RawCheckbox size="md" />
  <span>Accept terms</span>
</label>

With TanStack Field API

tsx

<form.Field name="agreeToTerms">
  {(field) => (
    <label className="flex items-center gap-2">
      <RawCheckbox fieldApi={field} />
      <span>I agree</span>
    </label>
  )}
</form.Field>

Accessibility

Native checkbox semantics -- screen readers announce state
Forwards ref for external focus management
Sets aria-invalid when fieldApi has errors
Keyboard togglable with Space key

FormCheckbox FormField

RawSelect

Native <select> primitive with options array, optional placeholder, and TanStack Form fieldApi support. Use when you need a lightweight dropdown without Radix overhead, or when building custom select molecules.

Sizes

States

RawSelectProps

Prop	Type	Default	Description
options*	{ value: string; label: string }[]	—	Options to render in the dropdown
fieldApi	AnyFieldApi	—	Optional TanStack Form field API for automatic state management
placeholder	string	—	Placeholder text displayed as disabled first option
size	'sm' \| 'md' \| 'lg'	'md'	Select size variant
hasError	boolean	false	Show error styling (red border and focus ring)
disabled	boolean	—	Disable the select

Installation

typescript

import { RawSelect } from '@stackmates/ui-forms';

Usage

Standalone

tsx

<RawSelect
  placeholder="Choose..."
  options={[
    { value: 'a', label: 'Option A' },
    { value: 'b', label: 'Option B' },
  ]}
/>

With TanStack Field API

tsx

<form.Field name="country">
  {(field) => (
    <RawSelect
      fieldApi={field}
      placeholder="Select country"
      options={countries}
    />
  )}
</form.Field>

Accessibility

Uses native <select> -- full keyboard and screen reader support
Placeholder rendered as disabled first option
Forwards ref for external focus management
Sets aria-invalid when fieldApi has errors

FormSelect FormSelectRx

RawTextarea

Textarea primitive with size variants and optional TanStack Form fieldApi. Renders a styled native <textarea> with error state support. Use for multi-line text input when you need full control over surrounding layout.

Sizes

States

RawTextareaProps

Prop	Type	Default	Description
fieldApi	AnyFieldApi	—	Optional TanStack Form field API for automatic state management
size	'sm' \| 'md' \| 'lg'	'md'	Textarea size variant
hasError	boolean	false	Show error styling (red border and focus ring)
placeholder	string	—	Placeholder text
rows	number	—	Number of visible text rows
disabled	boolean	—	Disable the textarea

Installation

typescript

import { RawTextarea } from '@stackmates/ui-forms';

Usage

Standalone

tsx

<RawTextarea
  placeholder="Write something..."
  rows={4}
  size="md"
/>

With TanStack Field API

tsx

<form.Field name="bio">
  {(field) => (
    <RawTextarea
      fieldApi={field}
      placeholder="Tell us about yourself"
      rows={6}
    />
  )}
</form.Field>

Accessibility

Native textarea semantics
Forwards ref for external focus management
Sets aria-invalid when fieldApi has errors
Resizable by default for user comfort

FormTextarea FormField

Prop

Type

Default

Description

form*

FormApi

—

TanStack Form instance

name*

keyof TFormData

—

Field name in form data

label*

string

—

Field label text

type

HTMLInputTypeAttribute

'text'

Input type (text, email, password, etc.)

placeholder

string

—

Placeholder text

required

boolean

—

Show required indicator

helpText

string

—

Help text below input

disabled

boolean

—

Disable the input

size

'sm' | 'md' | 'lg'

'md'

Input size variant

autoComplete

string

—

Browser autocomplete hint

autoFocus

boolean

—

Focus on mount

Prop

Type

Default

Description

form*

FormApi

—

TanStack Form instance

name*

keyof TFormData

—

Field name in form data

label*

string

—

Field label text

options*

{ value: string; label: string }[]

—

Select options array

placeholder

string

—

Placeholder text

required

boolean

—

Show required indicator

helpText

string

—

Help text below select

disabled

boolean

—

Disable the select

size

'sm' | 'md' | 'lg'

'md'

Select size variant

Prop

Type

Default

Description

form*

FormApi

—

TanStack Form instance

name*

keyof TFormData

—

Field name in form data

label*

string

—

Field label text

placeholder

string

—

Placeholder text

rows

number

Number of visible text rows

maxLength

number

—

Maximum character count

required

boolean

—

Show required indicator

helpText

string

—

Help text below textarea

disabled

boolean

—

Disable the textarea

size

'sm' | 'md' | 'lg'

'md'

Textarea size variant

Prop

Type

Default

Description

fieldApi

AnyFieldApi

—

Optional TanStack Form field API for automatic state management

size

'sm' | 'md' | 'lg'

'md'

Input size variant

hasError

boolean

false

Show error styling (red border and focus ring)

type

HTMLInputTypeAttribute

'text'

HTML input type (text, email, password, etc.)

placeholder

string

—

Placeholder text

disabled

boolean

—

Disable the input

Prop

Type

Default

Description

fieldApi

AnyFieldApi

—

Optional TanStack Form field API for automatic state management

size

'sm' | 'md' | 'lg'

'md'

Checkbox size variant

hasError

boolean

false

Show error styling (red border and focus ring)

checked

boolean

—

Controlled checked state (when not using fieldApi)

disabled

boolean

—

Disable the checkbox

Prop

Type

Default

Description

options*

{ value: string; label: string }[]

—

Options to render in the dropdown

fieldApi

AnyFieldApi

—

Optional TanStack Form field API for automatic state management

placeholder

string

—

Placeholder text displayed as disabled first option

size

'sm' | 'md' | 'lg'

'md'

Select size variant

hasError

boolean

false

Show error styling (red border and focus ring)

disabled

boolean

—

Disable the select

Prop

Type

Default

Description

fieldApi

AnyFieldApi

—

Optional TanStack Form field API for automatic state management

size

'sm' | 'md' | 'lg'

'md'

Textarea size variant

hasError

boolean

false

Show error styling (red border and focus ring)

placeholder

string

—

Placeholder text

rows

number

—

Number of visible text rows

disabled

boolean

—

Disable the textarea