mirror of https://github.com/cloud-shuttle/leptos-shadcn-ui.git synced 2026-05-14 18:40:40 +00:00

Files

Ubuntu 18c4ddcd05 drover: task-1767764907653950146

Task: Improve API documentation

2026-01-10 05:38:15 +00:00

1.6 KiB

Raw Blame History

Label Component API

A form label component for associating text with form controls.

Installation

# Cargo.toml
[dependencies]
shadcn-ui-leptos-label = "0.7"

use shadcn_ui_leptos_label::Label;

Component API

Label

Prop	Type	Default	Description
`for`	`MaybeProp<String>`	`None`	ID of associated element
`class`	`MaybeProp<String>`	`None`	Additional CSS classes
`id`	`MaybeProp<String>`	`None`	Unique identifier
`children`	`Option<Children>`	`None`	Label text

Usage Examples

Basic Label

use leptos::prelude::*;
use shadcn_ui_leptos_label::Label;
use shadcn_ui_leptos_input::Input;

#[component]
pub fn MyComponent() -> impl IntoView {
    view! {
        <div class="space-y-2">
            <Label for="email">"Email"</Label>
            <Input id="email" input_type="email" />
        </div>
    }
}

CSS Classes

.shadcn-label {
    text-sm font-medium leading-none
    peer-disabled:cursor-not-allowed peer-disabled:opacity-70
}

Accessibility

Labels must be associated with form controls using the for attribute matching the input's id.

TypeScript API

interface LabelProps {
  htmlFor?: string;
  className?: string;
  id?: string;
  children?: React.ReactNode;
}

export const Label: React.FC<LabelProps>;

Source: packages/leptos/label/src/default.rs

1.6 KiB Raw Blame History