apps/docs/content/docs/en/native/releases/beta-12.mdx
Beta 12 introduces three essential form components—InputOTP, Label, and Description—that enhance form building capabilities in React Native applications. This release also includes critical fixes for Popover close behavior, popup controlled state management, border radius configuration, and adds variant style prop support across multiple form components. These improvements provide developers with more robust form components and better control over component styling and behavior.
Update to the latest version:
<Tabs items={["npm", "pnpm", "yarn", "bun"]}> <Tab value="npm">
npm i heroui-native@beta
This release introduces 3 new essential form components:
The InputOTP component provides a complete solution for one-time password input scenarios, such as two-factor authentication, verification codes, and PIN entry. It features individual character slots with smooth animations, customizable grouping, separators, and comprehensive validation support.
<NativeVideoPlayerView target="component" slug="input-otp" srcLight="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/native/components/videos/input-otp-docs-light.mp4" srcDark="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/native/components/videos/input-otp-docs-dark.mp4" />
Features:
Usage:
import { InputOTP, Label, Description } from "heroui-native";
export function Example() {
return (
<>
<Label>Verify account</Label>
<InputOTP maxLength={6} onComplete={(code) => console.log(code)}>
<InputOTP.Group>
<InputOTP.Slot index={0} />
<InputOTP.Slot index={1} />
<InputOTP.Slot index={2} />
</InputOTP.Group>
<InputOTP.Separator />
<InputOTP.Group>
<InputOTP.Slot index={3} />
<InputOTP.Slot index={4} />
<InputOTP.Slot index={5} />
</InputOTP.Group>
</InputOTP>
<Description>We've sent a code to your email</Description>
</>
);
}
For complete documentation and examples, see the InputOTP component page.
Related PR: #214
The Label component provides accessible labeling for form fields with built-in support for required indicators, validation states, and disabled states. It automatically displays an asterisk for required fields and adapts its styling based on the field's validation state.
<NativeVideoPlayerView target="component" slug="label" srcLight="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/native/components/videos/label-docs-light.mp4" srcDark="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/native/components/videos/label-docs-dark.mp4" />
Features:
Usage:
import { Label, TextField } from "heroui-native";
export function Example() {
return (
<TextField>
<Label isRequired>Password</Label>
<TextField.Input placeholder="Create a password" secureTextEntry />
</TextField>
);
}
For complete documentation and examples, see the Label component page.
Related PR: #214
The Description component provides accessible helper text and descriptions for form fields. It features muted styling by default and supports linking to form fields via nativeID for screen reader support.
<NativeVideoPlayerView target="component" slug="description" srcLight="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/native/components/videos/description-docs-light.mp4" srcDark="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/native/components/videos/description-docs-dark.mp4" />
Features:
Usage:
import { Description, TextField } from "heroui-native";
export function Example() {
return (
<TextField>
<TextField.Label>Email address</TextField.Label>
<TextField.Input
placeholder="Enter your email"
keyboardType="email-address"
aria-describedby="email-desc"
/>
<Description nativeID="email-desc">
We'll never share your email with anyone else.
</Description>
</TextField>
);
}
For complete documentation and examples, see the Description component page.
Related PR: #214
The Popover component has been fixed to properly handle programmatic close operations via ref.
Improvements:
This fix ensures that when developers call popoverRef.current?.close(), the popover closes reliably with proper animation and state management.
Related PR: #207
Popup components (including Dialog, Bottom Sheet, and Popover) have been fixed to properly handle controlled state via the isOpen prop.
Improvements:
This fix ensures that popup components correctly respond to external state changes when using controlled mode, providing developers with more predictable behavior when managing popup state externally.
Related PR: #215
The Button, Chip, and Tabs components have been fixed to properly respect global border radius configuration.
Improvements:
These fixes ensure that global border radius settings defined in the theme configuration are properly applied to Button, Chip, and Tabs components, providing consistent styling across the application.
Related PR: #218
The TextField component's Input subcomponent has been cleaned up by removing the animation and isAnimatedStyleActive props.
Changes:
animation prop from TextField.InputisAnimatedStyleActive prop from TextField.InputThese props were removed to streamline the TextField.Input API and reduce complexity. Animation behavior is now handled internally by the component, providing a more consistent and predictable experience without requiring manual animation configuration.
Related PR: #220
The HeroUINativeProvider component now supports devInfo configuration options for enhanced development experience.
New Capability:
import { HeroUINativeProvider } from "heroui-native";
export function App() {
return (
<HeroUINativeProvider
devInfo={{
// Configuration options for development
}}
>
</HeroUINativeProvider>
);
}
This enhancement provides developers with additional configuration options for development and debugging scenarios, making it easier to troubleshoot and optimize applications during development.
Related PR: #217
The Checkbox, Radio, TextField, and InputOTP components now support the variant style prop for easier variant customization.
New Capability:
import { Checkbox, Radio, TextField, InputOTP } from "heroui-native";
// Apply variant styles directly via style prop
<Checkbox variant="bordered" style={{ variant: "flat" }}>
Option 1
</Checkbox>
<Radio variant="solid" style={{ variant: "bordered" }}>
Option 2
</Radio>
<TextField variant="underlined" style={{ variant: "bordered" }}>
<TextField.Input />
</TextField>
This enhancement provides developers with more flexibility when customizing component variants, allowing variant changes to be applied via the style prop in addition to the component's variant prop.
Related PR: #220
Fixed global border radius configuration not applying correctly to certain components.
Fixes:
This release includes fixes for the following issues:
Issue #93: Fixed global border radius configuration not applying to Button component in hero-ui-native using Unwind. The Button component now properly respects border radius settings defined in the global theme configuration, ensuring consistent styling across the application.
Issue #213: Fixed Select controlled mode (isOpen) not working. The Select component now properly handles controlled state when the isOpen prop is provided, allowing developers to manage Select open/close state externally with predictable behavior.
Related PRs:
Thanks to everyone who contributed to this release!