Label

Renders an accessible label associated with controls.

Basic

A simple label with text.

With Checkbox

Labels work seamlessly with form controls using the for attribute.

With Input

Labels are commonly used with text inputs.

Disabled State

Labels automatically style when their associated input is disabled (using the peer-disabled utility).

Custom Styling

Labels can be customized with additional classes.

Card Style with Checkbox

Labels can wrap checkboxes to create interactive card-style selections using has-[:checked] selectors.

Form Example

A complete form using labels.

Open Markdown
FreeLabel

Accessible form labels.

Install with the Proa CLI
proa ui add label

Installs the reviewed component source, dependencies, shared support files, and required legal notices.

CLI and registry setup
mod.rs
// SPDX-FileCopyrightText: 2026 Proa Labs, Inc.
// SPDX-License-Identifier: (MIT OR Apache-2.0) AND MIT

//! Label component - accessible form label
//!
//! A simple styled label component that renders as a native HTML `<label>` element.
//! Based on shadcn/ui's Label component.
mod md;
use crate::tw_join;
use proa_core::{ClassList, WebContext, WebRenderSync, WriteBuf};
use proa_macros::html_sync;
/// Base styles for the label - matches shadcn/ui exactly
/// "flex items-center gap-2 text-sm leading-none font-medium select-none
///  group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50
///  peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
const LABEL_BASE: &str = tw_join!(
    "flex",
    "items-center",
    "gap-2",
    "text-sm",
    "leading-none",
    "font-medium",

Search

Type at least 2 characters

Customize

Make it yours

Palette

Radius

Overview
Components
Settings

Build your own

Themed Proa UI surface

Preview
Components52
RecipesTyped
customer-portal