Forms

These components handle the visual structure of a form. They are designed to work alongside the useForm hook from @objectifthunes/limestone-sdk. In a complete integration, FormField and FormError read field errors from the form context; the shell implementations here provide the style contract.

Form

A column container for grouping form fields with configurable gap. Accepts all BoxStyleProps.

Prop	Type	Default	Description
`gap?`	`SpacingProp`	—	Vertical spacing between children, resolved from spacing tokens
`children?`	`React.ReactNode`	—	Form content
`accessibilityLabel?`	`string`	—	Accessibility label for the form container
`testID?`	`string`	—	Test identifier

The headless hook useFormComponent(tokens, props) returns containerStyle (always flexDirection: column with resolved gap) and accessibilityProps.

import { Form, FormField, TextInput } from '@objectifthunes/limestone-sdk';
import { useForm, z } from '@objectifthunes/limestone-sdk';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

function LoginForm() {
  const form = useForm({
    schema,
    defaultValues: { email: '', password: '' },
    onSubmit: async (values) => { /* ... */ },
  });

  return (
    <Form gap="lg" accessibilityLabel="Login form">
      <FormField name="email" label="Email">
        <TextInput
          value={form.values.email}
          onChangeText={(v) => form.setValue('email', v)}
          onBlur={() => form.validateField('email')}
          error={form.errors.email}
        />
      </FormField>
    </Form>
  );
}

FormField

A vertical container that groups a label, an input child, and an optional error message. Accepts all BoxStyleProps.

Prop	Type	Default	Description
`name`	`string`	—	Field name; used as a form context key in production integrations
`label?`	`string`	—	Label text rendered above the input
`children?`	`React.ReactNode`	—	The input component
`accessibilityLabel?`	`string`	—	Accessibility label for the field container
`testID?`	`string`	—	Test identifier

The headless hook useFormField(tokens, props) returns:

Result	Description
`containerStyle`	`flexDirection: column`
`labelStyle`	sm font, semibold weight, foreground color, `marginBottom: xs`
`errorStyle`	xs font, regular weight, destructive color, `marginTop: xs`
`accessibilityProps`	`accessibilityLabel`, `testID`

import { FormField, TextInput } from '@objectifthunes/limestone-sdk';

<FormField name="email" label="Email address">
  <TextInput
    value={email}
    onChangeText={setEmail}
    keyboardType="email-address"
  />
</FormField>

FormError

A standalone error text component that renders an xs destructive-colored message. Accepts all BoxStyleProps.

Use this when you need to render a field error outside of a FormField, or when wiring up form context manually.

Prop	Type	Default	Description
`name`	`string`	—	Field name; used as a form context key in production integrations
`accessibilityLabel?`	`string`	—	Accessibility label
`testID?`	`string`	—	Test identifier

The headless hook useFormError(tokens, props) returns:

Result	Description
`textStyle`	xs font size, regular weight, body font family, destructive color
`accessibilityProps`	`accessibilityLabel`, `testID`

import { FormError } from '@objectifthunes/limestone-sdk';

// Renders the error for the 'email' field from form context
<FormError name="email" testID="email-error" />

Media

Screens