# v3.0.0-alpha.34 · HeroUI

> Essentials for building forms with a clean API Form, TextField, RadioGroup, Label, Input, Fieldset and more.

- Page: https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-alpha-34
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

October 15, 2025


This release introduces Form-based components, form field tokens, reorganizes Storybook, and aligns data-slot markers across components.


## Installation

Update to the latest version:


  

#### npm


    ```bash
    npm i @heroui/styles@alpha @heroui/react@alpha
    ```
  
  

#### pnpm


    ```bash
    pnpm add @heroui/styles@alpha @heroui/react@alpha
    ```
  
  

#### yarn


    ```bash
    yarn add @heroui/styles@alpha @heroui/react@alpha
    ```
  
  

#### bun


    ```bash
    bun add @heroui/styles@alpha @heroui/react@alpha
    ```
  


> 
  **Using AI assistants?** Simply prompt "Hey Cursor, update HeroUI to the latest version" and your AI assistant will automatically compare versions and apply the necessary changes. Learn more about the [HeroUI MCP Server](/docs/ui-for-agents/mcp-server).


## What's New

### Form-based Components

We've introduced a comprehensive set of form-based components built on React Aria Components, providing accessible and composable building blocks for creating forms. These components include [Description](/systems/heroui/docs/components/description), [FieldError](/systems/heroui/docs/components/field-error), [Fieldset](/systems/heroui/docs/components/fieldset), [Form](/systems/heroui/docs/components/form), [Input](/systems/heroui/docs/components/input), [Label](/systems/heroui/docs/components/label), [RadioGroup](/systems/heroui/docs/components/radio-group), [TextField](/systems/heroui/docs/components/text-field), and [TextArea](/systems/heroui/docs/components/textarea).

#### Description


> Example `description-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-alpha-34


#### FieldError


> Example `field-error-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-alpha-34


#### Fieldset


> Example `fieldset-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-alpha-34


#### Form


> Example `form-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-alpha-34


#### Input


> Example `input-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-alpha-34


#### Label


> Example `label-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-alpha-34


#### RadioGroup


> Example `radio-group-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-alpha-34


#### TextField


> Example `text-field-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-alpha-34


#### TextArea


> Example `textarea-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-alpha-34


### Form Field Tokens

Introduced form field tokens `--field-*` for consistent styling across form components. See [Theming](/systems/heroui/docs/getting-started/theming#calculated-variables-tailwind) for the `--field-*` variables.

### Storybook Organization

Reorganized Storybook by category for better navigation and component discovery.

### Skeleton Animation Token

**🚧 Breaking Changes:** Renamed `--skeleton-default-animation-type` to `--skeleton-animation` in [Skeleton](/systems/heroui/docs/components/skeleton) for consistency with other component tokens.

### Data-Slot Alignment

Aligned data-slot markers across components for consistent styling and customization. This standardization makes it easier to target specific component parts with CSS selectors and improves the overall developer experience when customizing component styles.

Components now use consistent `data-slot` attributes like:
- `data-slot="base"` for the root element
- `data-slot="label"` for label text
- `data-slot="description"` for description text
- `data-slot="error"` for error messages

This allows for predictable CSS targeting across all form components:

```css
.radio {
  [data-slot="label"] {
    /* Styles apply to radio labels */
  }
}
``` 

## Documentation Improvements

### Component Documentation
- **[Link](/systems/heroui/docs/components/link)**: Added Anatomy, and examples with Icon. Updated Link and Link.Icon props section.
- **[Description](/systems/heroui/docs/components/description)**, **[FieldError](/systems/heroui/docs/components/field-error)**, **[Fieldset](/systems/heroui/docs/components/fieldset)**, **[Form](/systems/heroui/docs/components/form)**, **[Input](/systems/heroui/docs/components/input)**, **[Label](/systems/heroui/docs/components/label)**, **[RadioGroup](/systems/heroui/docs/components/radio-group)**, **[TextField](/systems/heroui/docs/components/text-field)**, and **[TextArea](/systems/heroui/docs/components/textarea)**: New documentation with usage examples


## Migration Guide

### Skeleton Component Migration

1. **Update animation token:**
   - Replace `--skeleton-default-animation-type` with `--skeleton-animation`

## Links

- [GitHub PR #5780](https://github.com/heroui-inc/heroui/pull/5780)
- [Description Component](/systems/heroui/docs/components/description)
- [FieldError Component](/systems/heroui/docs/components/field-error)
- [Fieldset Component](/systems/heroui/docs/components/fieldset)
- [Form Component](/systems/heroui/docs/components/form)
- [Input Component](/systems/heroui/docs/components/input)
- [Label Component](/systems/heroui/docs/components/label)
- [RadioGroup Component](/systems/heroui/docs/components/radio-group)
- [TextField Component](/systems/heroui/docs/components/text-field)
- [TextArea Component](/systems/heroui/docs/components/textarea)
- [Skeleton Component](/systems/heroui/docs/components/skeleton)

## Contributors

Thanks to everyone who contributed to this release!

---

Index of all JGuang resources: https://jiguang132.com/llms.txt