v3.0.0-alpha.34

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 i @heroui/styles@alpha @heroui/react@alpha

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

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

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

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, FieldError, Fieldset, Form, Input, Label, RadioGroup, TextField, and TextArea.

Description

import {Description, Input, Label} from "@heroui/react";

export function Basic() {
  return (
    <div className="flex flex-col gap-1">

FieldError

"use client";

import {FieldError, Input, Label, TextField} from "@heroui/react";
import {useState} from "react";

Fieldset

"use client";

import {FloppyDisk} from "@gravity-ui/icons";
import {
  Button,

Form

"use client";

import {Check} from "@gravity-ui/icons";
import {Button, Description, FieldError, Form, Input, Label, TextField} from "@heroui/react";

Input

import {Input} from "@heroui/react";

export function Basic() {
  return <Input aria-label="Name" className="w-64" placeholder="Enter your name" />;
}

Label

import {Input, Label} from "@heroui/react";

export function Basic() {
  return (
    <div className="flex flex-col gap-1">
      <Label htmlFor="name">Name</Label>
      <Input className="w-64" id="name" placeholder="Enter your name" type="text" />
    </div>
  );
}

RadioGroup

import {Description, Label, Radio, RadioGroup} from "@heroui/react";

export function Basic() {
  return (
    <RadioGroup defaultValue="premium" name="plan">

TextField

import {Input, Label, TextField} from "@heroui/react";

export function Basic() {
  return (
    <TextField className="w-full max-w-64" name="email" type="email">
      <Label>Email</Label>
      <Input placeholder="Enter your email" />
    </TextField>
  );
}

TextArea

import {TextArea} from "@heroui/react";

export function Basic() {
  return (
    <TextArea

Form Field Tokens

Introduced form field tokens --field-* for consistent styling across form components. See Theming 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 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:

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

Documentation Improvements

Component Documentation

• Link: Added Anatomy, and examples with Icon. Updated Link and Link.Icon props section.
• Description, FieldError, Fieldset, Form, Input, Label, RadioGroup, TextField, and 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
• Description Component
• FieldError Component
• Fieldset Component
• Form Component
• Input Component
• Label Component
• RadioGroup Component
• TextField Component
• TextArea Component
• Skeleton Component

Contributors

Thanks to everyone who contributed to this release!