FieldPassword

A helper that renders Field preconfigured for password entry: it sets secureTextEntry, adds a lock icon before the input, and renders a Show/Hide toggle after it.

React Native

import { FieldPassword } from '@hoverinc/design-system-react-native';

<FieldPassword label="Password" onChangeText={setPassword} value={password} />;

The Show/Hide toggle is built in — pressing it flips secureTextEntry off and switches the keyboard to visible-password (iOS) so autocorrect doesn't interfere with a visible password. There's no prop for this; it's internal state.

Common Mistakes

• iconBefore, elementAfter, addonBefore, addonAfter, and elementBefore aren't accepted on FieldPassword — TypeScript will reject them. The lock icon owns iconBefore and the Show/Hide toggle owns elementAfter internally; there's no way to override either. Use a plain Field with secureTextEntry set manually if you need a custom icon or trailing element on a password input.
• Don't wrap FieldPassword expecting to control the visibility toggle from outside — visibility state is internal and not exposed as a prop.
• Prefer uncontrolled usage (defaultValue) over passing value unless you have a specific reason to control it — this is the team's default for FieldPassword and FieldSearch alike, both added specifically to replace inconsistent bespoke password/search inputs built on plain Field.