RoadieRoadie
  • Home
  • Brand
  • Foundations
  • Content
  • Tokens
  • Components
  • Charts
  • Widgets
  • Appearance
HomeBrandFoundations
Appearance

Components

  • Navigation

    • Breadcrumb
    • LinkBeta
    • NavigatorAlpha
    • Steps
    • Tabs
  • Layout

    • Accordion
    • CollapsibleBeta
    • PaneAlpha
    • ScrollArea
    • Separator
  • Actions

    • Button
    • IconButton
    • ToggleBeta
    • Toggle groupBeta
    • ToolbarBeta
  • Fields

    • EditorAlpha
    • Field
    • Fieldset
    • Input
    • Label
    • Number fieldBeta
    • OTP fieldBeta
    • Query fieldAlpha
    • Textarea
  • Choices

    • Autocomplete
    • CheckboxBeta
    • Combobox
    • Radio group
    • Select
    • SliderBeta
    • SwitchBeta
  • Date and time

    • CalendarBeta
    • CalendarTile
    • Countdown
    • Dashboard periodBeta
    • Date fieldBeta
    • Date pickerBeta
    • Date range pickerBeta
    • DateTime
    • Duration
    • Time fieldBeta
  • Collections

    • Card
    • Carousel
    • DataTableBeta
    • ListAlpha
    • Marquee
    • RecordGridAlpha
    • RecordTableAlpha
    • SortableAlpha
    • TableBeta
  • Overlays

    • Dialog
    • Drawer
    • MenuBeta
    • Popover
    • ToastBeta
    • Tooltip
  • Status

    • Badge
    • CalloutBeta
    • DeltaBeta
    • Empty state
    • MeterBeta
    • ProgressBeta
    • SkeletonBeta
    • SparklineBeta
    • StatTileBeta
  • Media & brand

    • AvatarBeta
    • Icon Tile
    • Image
    • Logo
    • PatternBeta
    • QR codeBeta
    • SpotIllustration
  • Text

    • Code
    • Highlight
    • KbdBeta
    • Mark
    • Prose

Label

Status
Stable
Added
Components 2.0.08 Apr 2026
Docs updated
19 Oct 2026

A styled label for form controls.

Import

import { Label } from '@oztix/roadie-components'

Examples

Default

<Label>Email address</Label>

Guidelines

Prefer Field.Label

In most cases, use Field to wrap your form controls instead of using Label directly. Field.Label automatically wires htmlFor, provides consistent spacing, and supports showIndicator for required/optional indicators.

<Field required>
<Field.Label showIndicator>Full name</Field.Label>
<Field.Input />
</Field>

When to use standalone Label

Use Label only when you need a styled label outside of a Field wrapper. One example is a label next to a standalone toggle or a non-form context.

Accessibility

  • When used standalone, pair with a form control using matching htmlFor and id attributes.
  • Renders a native <label> element for built-in browser accessibility.
  • Prefer Field.Label which handles htmlFor/id wiring automatically.

API reference

Label

No additional props. It forwards all standard HTML attributes to the underlying element.

Previous page← InputNext pageNumber field →