feat(ui): Mosaic field component

[austincalvelage]

Description

https://swingset-git-mosaic-text-field-component.clerkstage.dev/components/field

Adds the Mosaic Field component:

• Adds the compound Field.Root, Field.Label, Field.Description, and Field.Error API.
• Connects labels, descriptions, and errors to the field control with generated IDs and the appropriate aria-* attributes.
• Shares invalid, disabled, and required state with composed Mosaic inputs.
• Adds an alert-circle icon for validation errors.

import { Field } from '@clerk/ui/mosaic/components/field';
import { Input } from '@clerk/ui/mosaic/components/input';

<Field.Root required>
  <Field.Label>Email address</Field.Label>
  <Input
    name='email'
    type='email'
  />
  <Field.Description>Used for account notifications.</Field.Description>
</Field.Root>;

[changeset-bot]

🦋 Changeset detected

Latest commit: b387d17

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview	Aug 5, 2026 5:04pm
swingset	Ready	Preview	Aug 5, 2026 5:04pm

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9322

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9322

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9322

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9322

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9322

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9322

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9322

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9322

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9322

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9322

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9322

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9322

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9322

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9322

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9322

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9322

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9322

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9322

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9322

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9322

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9322

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9322

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9322

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9322

commit: b387d17

[github-actions]

API Changes Report

Generated by Break Check on 2026-08-05T17:07:21.706Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

---

Report generated by Break Check

_{Last ran on b387d17.}

[alexcarpenter]

do you think we could have context that generates the ids/htmlFors to avoid needing to supply them manually? main benefit I think of the field abstraction.