Live Docs

Navigation

Forms /

stable

Label

Form label dengan required indicator (asterisk) + disabled state.

import { Label } from "@naraya/ui";

Overview

Render <label> dengan styling Naraya. Pakai prop htmlFor untuk mengikat ke input.

Examples

Default

<Stack gap="1">
  <Label htmlFor="name">Nama lengkap</Label>
  <Input id="name" />
</Stack>

Required

Tambah asterisk merah otomatis.

<Label htmlFor="email" required>Email</Label>

Disabled

<Label htmlFor="member" disabled>Nomor anggota</Label>
<Input id="member" disabled />

Props

PropTypeDefaultDescription
requiredbooleanfalseTampilkan asterisk merah.
disabledbooleanfalseStyle label sebagai disabled (mengikuti input).
htmlForstring—ID input yang dilabeli.
childrenReactNode—Konten label.
...restLabelHTMLAttributes—Semua atribut native label.

Tokens Used

--text-main

Warna label

--color-error

Asterisk required

--text-muted

Warna label disabled

--font-size-sm

Ukuran teks

Accessibility

  • Always link via htmlFor → input id agar klik label fokus ke input.
  • Required asterisk hanya visual; screen reader gunakan aria-required pada input.
  • Disabled state hanya visual; gunakan disabled pada input asli.