# Beta 12
**Category**: native
**URL**: https://www.heroui.com/docs/native/releases/beta-12
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/native/releases/beta-12.mdx
> InputOTP, Label, and Description components, Popover close fixes, controlled state improvements, border radius fixes, and variant style prop support
***
January 13, 2026
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.
## Installation
Update to the latest version:
```bash
npm i heroui-native@beta
```
``` bash
pnpm add heroui-native@beta
```
```bash
yarn add heroui-native@beta
```
```bash
bun add heroui-native@beta
```
**Using AI assistants?** Simply prompt "Hey Cursor, update HeroUI Native to the latest version" and your AI assistant will automatically compare versions and apply the necessary changes. Learn more about the [HeroUI Native MCP Server](/docs/native/getting-started/mcp-server).
## Try It Out
Experience all the Beta 12 improvements in action with our preview app! You can explore the new InputOTP, Label, and Description components, along with the Popover fixes, controlled state improvements, border radius fixes, and variant style prop support directly on your device.
### Prerequisites
Make sure you have the latest version of [Expo Go](https://expo.dev/go) installed on your mobile device.
### How to Access
**Option 1: Scan the QR Code**
Use your device's camera or Expo Go app to scan:
> **Note for Android users:** If scanning the QR code with your device's camera or other scanner apps redirects to a browser and shows a 404 error, open Expo Go first and use its built-in QR scanner instead.
**Option 2: Click the Link**
**[📱 Open Demo App in Expo Go](https://link.heroui.com/native-demo)**
This will automatically open the app in Expo Go if it's installed on your device.
## What's New
### New Components
This release introduces **3 new** essential form components:
- **[InputOTP](/docs/native/components/input-otp)**: Input component for entering one-time passwords (OTP) with individual character slots, animations, and validation support.
- **[Label](/docs/native/components/label)**: Text component for labeling form fields and other UI elements with support for required indicators and validation states.
- **[Description](/docs/native/components/description)**: Text component for providing accessible descriptions and helper text for form fields and other UI elements.
#### InputOTP
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.
**Features:**
- Individual character slots with smooth animations and caret indicators
- Flexible grouping with separators for visual organization
- Pattern-based input restriction (digits, characters, or custom regex)
- Controlled and uncontrolled value management
- Validation state support with visual feedback
- Customizable placeholder characters per slot position
- Paste support with transformer function
- Complete accessibility support
**Usage:**
```tsx
import { InputOTP, Label, Description } from "heroui-native";
export function Example() {
return (
<>
console.log(code)}>
We've sent a code to your email
);
}
```
For complete documentation and examples, see the [InputOTP component page](/docs/native/components/input-otp).
**Related PR:** [#214](https://github.com/heroui-inc/heroui-native/pull/214)
#### Label
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.
**Features:**
- Automatic required field indicator (asterisk)
- Invalid state styling for validation errors
- Disabled state support
- Compound component architecture for custom layouts
- Full accessibility support with nativeID linking
- Customizable styling via className, classNames, and styles props
**Usage:**
```tsx
import { Label, TextField } from "heroui-native";
export function Example() {
return (
);
}
```
For complete documentation and examples, see the [Label component page](/docs/native/components/label).
**Related PR:** [#214](https://github.com/heroui-inc/heroui-native/pull/214)
#### Description
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.
**Features:**
- Muted text styling optimized for helper text
- Accessibility linking via nativeID and aria-describedby
- Seamless integration with form components
- Customizable styling support
**Usage:**
```tsx
import { Description, TextField } from "heroui-native";
export function Example() {
return (
Email address
We'll never share your email with anyone else.
);
}
```
For complete documentation and examples, see the [Description component page](/docs/native/components/description).
**Related PR:** [#214](https://github.com/heroui-inc/heroui-native/pull/214)
## Component Improvements
### Popover Close via Ref Fix
The [Popover](/docs/native/components/popover) component has been fixed to properly handle programmatic close operations via ref.
**Improvements:**
- Fixed ref-based close method to properly trigger close animations
- Improved state synchronization between ref calls and component state
- Enhanced reliability of programmatic close operations
This fix ensures that when developers call `popoverRef.current?.close()`, the popover closes reliably with proper animation and state management.
**Related PR:** [#207](https://github.com/heroui-inc/heroui-native/pull/207)
### Popup Controlled State Fix
Popup components (including Dialog, Bottom Sheet, and Popover) have been fixed to properly handle controlled state via the `isOpen` prop.
**Improvements:**
- Fixed controlled state synchronization for popup components
- Improved handling of external state changes
- Enhanced reliability when using controlled mode
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](https://github.com/heroui-inc/heroui-native/pull/215)
### Button, Chip, and Tabs Border Radius Fix
The [Button](/docs/native/components/button), [Chip](/docs/native/components/chip), and [Tabs](/docs/native/components/tabs) components have been fixed to properly respect global border radius configuration.
**Improvements:**
- Fixed border radius configuration application for Button component
- Fixed border radius configuration application for Chip component
- Fixed border radius configuration application for Tabs component
- Improved consistency across components using global theme configuration
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](https://github.com/heroui-inc/heroui-native/pull/218)
### TextField.Input Props Cleanup
The [TextField](/docs/native/components/text-field) component's Input subcomponent has been cleaned up by removing the `animation` and `isAnimatedStyleActive` props.
**Changes:**
- Removed `animation` prop from TextField.Input
- Removed `isAnimatedStyleActive` prop from TextField.Input
- Simplified component API for better maintainability
These 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](https://github.com/heroui-inc/heroui-native/pull/220)
## API Enhancements
### HeroUINativeProvider devInfo Configuration
The `HeroUINativeProvider` component now supports `devInfo` configuration options for enhanced development experience.
**New Capability:**
```tsx
import { HeroUINativeProvider } from "heroui-native";
export function App() {
return (
{/* Your app content */}
);
}
```
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](https://github.com/heroui-inc/heroui-native/pull/217)
### Variant Style Prop Support
The [Checkbox](/docs/native/components/checkbox), [Radio](/docs/native/components/radio), [TextField](/docs/native/components/text-field), and [InputOTP](/docs/native/components/input-otp) components now support the `variant` style prop for easier variant customization.
**New Capability:**
```tsx
import { Checkbox, Radio, TextField, InputOTP } from "heroui-native";
// Apply variant styles directly via style prop
Option 1
Option 2
```
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](https://github.com/heroui-inc/heroui-native/pull/220)
## Style Fixes
### Border Radius Configuration
Fixed global border radius configuration not applying correctly to certain components.
**Fixes:**
- Fixed Button component not respecting global border radius configuration
- Fixed Chip component border radius application
- Fixed Tabs component border radius application
### Style Optimizations
- **Border Radius Consistency**: Improved consistency of border radius application across Button, Chip, and Tabs components
- **Theme Configuration**: Enhanced theme configuration propagation to ensure all components respect global settings
## Bug Fixes
This release includes fixes for the following issues:
- **[Issue #93](https://github.com/heroui-inc/heroui-native/issues/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](https://github.com/heroui-inc/heroui-native/issues/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:**
- [#218](https://github.com/heroui-inc/heroui-native/pull/218)
- [#215](https://github.com/heroui-inc/heroui-native/pull/215)
## Links
- [Component Documentation](../components)
- [GitHub Repository](https://github.com/heroui-inc/heroui-native)
## Contributors
Thanks to everyone who contributed to this release!
