Component

Form field

A label-and-error wrapper around any input: a small caption above, an optional inline hint, and an animated error message with an icon below.

Standalone

Email*

Enter a valid email address

form field.tsx

<NativeFormField label="Email" required error={error}>
  <NativeInput value={value} onValueChange={setValue} />
</NativeFormField>

Example

Stacked into an account-creation form, each field carrying its own caption and error state independently.

Full name*

Email*

Enter a valid email address

form-field-example.tsx

<NativeFormField label="Full name" required>
  <NativeInput value={name} onValueChange={onNameChange} />
</NativeFormField>
<NativeFormField label="Email" required error={emailError}>
  <NativeInput value={email} onValueChange={onEmailChange} />
</NativeFormField>

Capabilities

Prop	Type	Description
labelrequired	string	-
error	string	-
hint	string	-
required	boolean	-
childrenrequired	React.ReactNode	-
className	string	-