Design System

FoundationComponentsEngineeringReleases
⌘K

Field

A comprehensive input field component that provides a complete form input experience with animated labels, error message, icon support, and customizable addons/decorations.

Field vs. InputField

Field is built on top of InputField, which provides the core input functionality with validation and focus states. Use InputField directly when you need error messages but don't want icons, addons, or animated labels.

React Native

Usage

The Field component provides a complete form input experience with animated labels and built-in validation:


import { Field, YStack } from '@hoverinc/design-system-react-native';
const App = () => (
<YStack gap="$500">
<Field label="Email" keyboardType="email-address" />
<Field label="Password" secureTextEntry />
<Field label="Phone" keyboardType="phone-pad" />
</YStack>
);

Icons

Add icons before or after the input using the iconBefore and iconAfter props:


import { Field, YStack } from '@hoverinc/design-system-react-native';
import { iconMail, iconEye } from '@hoverinc/icons/native';
const App = () => (
<YStack gap="$500">
<Field
label="Email Address"
iconBefore={iconMail}
keyboardType="email-address"
/>
<Field label="Password" iconAfter={iconEye} secureTextEntry />
</YStack>
);

Custom Elements

Use elementBefore and elementAfter for custom components rendered as decorations within the field:


import { Body, Field, YStack } from '@hoverinc/design-system-react-native';
const App = () => (
<Stack gap="$500">
<Field
label="Price"
elementBefore={
<Body bold size="small">
$
</Body>
}
keyboardType="numeric"
/>
<Field
label="Width"
elementAfter={
<Body bold size="small">
px
</Body>
}
keyboardType="numeric"
/>
</Stack>
);

Error Message

Handle validation and error states with the isInvalid and errorMessage props:

Note

For an error message to render properly you must provide both isInvalid and errorMessage.


import { Field, YStack } from '@hoverinc/design-system-react-native';
const App = () => (
<YStack gap="$500">
<Field label="Valid Input" defaultValue="This is valid" />
<Field
label="Invalid Input"
defaultValue="invalid@"
isInvalid
errorMessage="Please enter a valid email address"
/>
</YStack>
);

Ref Usage

Access Field methods using a ref:


import { useRef } from 'react';
import { Button, Field, YStack } from '@hoverinc/design-system-react-native';
const App = () => {
const fieldRef = useRef(null);
const handleFocus = () => {
fieldRef.current?.focus();
};
const handleClear = () => {
fieldRef.current?.clear();
};
return (
<YStack gap="$400">
<Field
ref={fieldRef}
label="Controlled Field"
placeholder="Use buttons to control this field"
/>
<YStack gap="$300">
<Button onPress={handleFocus}>Focus</Button>
<Button variant="secondary" onPress={handleClear}>
Clear
</Button>
</YStack>
</YStack>
);
};

Props

Note

Field accepts all standard React Native TextInput props.

PropTypeDescription
labelstringRequired. The label text for the field
placeholderstringPlaceholder text displayed when the field is empty
iconBeforeIconsAvailableIcon to display before the input
iconAfterIconsAvailableIcon to display after the input
elementBeforeReactElementCustom element to display before the input
elementAfterReactElementCustom element to display after the input
isDisabledbooleanWhether the field is disabled
isInvalidbooleanWhether the field is in an invalid state
errorMessagestringError message to display below the field
isFocusedbooleanControlled focus state
onFocusChange(focused: boolean) => voidCallback when focus state changes
addonBeforeIconsAvailable | string | ReactElementDeprecated. Use iconBefore or elementBefore instead
addonAfterIconsAvailable | string | ReactElementDeprecated. Use iconAfter or elementAfter instead

Ref Methods

MethodDescription
focus()Programmatically focus the field
blur()Programmatically blur the field
clear()Clear the field value
valueGet the current field value
isFocusedGet the current focus state

InputField Component

For cases where you need error message display, helper text, and focus state management but don't want the complexity of animated labels, icons, or addons, use the InputField component directly:


import { InputField } from '@hoverinc/design-system-react-native';
const App = () => (
<InputField
placeholder="Enter your email"
errorMessage="Please enter a valid email"
helperText="We'll never share your email"
isInvalid
/>
);

Note

Helper text is aligned to the left by default, but when rendered together with an error message, it will float to the right to avoid interfering with the error display.

When to use InputField:

  • You need error message display.
  • You want helper text support for additional information.
  • You want focus state management.
  • You don't need animated labels.
  • You don't need icons or addons.
  • You're building a custom input component.

When to use Field:

  • You need animated labels.
  • You want icon or addon support.
  • You need a complete form input experience.
  • You want all the visual enhancements.

Convenience Components

For common input patterns, we provide specialized convenience components that wrap Field with pre-configured behavior:

FieldSearch

A search field with a search icon and common search behavior:


import { FieldSearch } from '@hoverinc/design-system-react-native';
const App = () => (
<FieldSearch
label="Search"
placeholder="Search for products..."
onChangeText={handleSearch}
/>
);

FieldPassword

A password field with show/hide toggle functionality:


import { FieldPassword } from '@hoverinc/design-system-react-native';
const App = () => (
<FieldPassword
label="Password"
placeholder="Enter your password"
onChangeText={handlePasswordChange}
/>
);

These convenience components provide the same API as Field but with sensible defaults and pre-configured icons for common use cases. They're perfect for standard form patterns where you don't need to customize the icon behavior.

Dropdown

Flex

Copyright © 2025 Hover Inc. All Rights Reserved.