{
  "title": "Label",
  "description": "Standalone label for toggle rows and settings entries that do not need a full Field envelope.",
  "url": "/docs/components/label",
  "since": "0.1.0",
  "tags": [
    "form",
    "a11y"
  ],
  "platform": "both",
  "source": "---\ntitle: Label\ndescription: Standalone label for toggle rows and settings entries that do not need a full Field envelope.\nsince: 0.1.0\ntags: [form, a11y]\nplatform: both\ncategory: inputs\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Label\" />\n\n`<Label>` is a standalone label that wires to a control via an explicit `htmlFor`\nprop. It renders the same visual style and required indicator as the `Field.Label`\nslot inside `<Field>`.\n\n## When to use\n\nUse `<Field>` when you need the full envelope: auto-generated IDs, description,\nerror message, and ARIA wiring. Field's shorthand props (`label`, `description`,\n`error`) mean it's only one wrapper, not a verbose compound block — see\n[Field](/docs/components/field).\n\nUse `<Label>` when you are composing a simpler row yourself — a toggle with a\nlabel, a settings entry, or any spot where the full Field structure is\nmore overhead than the layout needs.\n\n## Basic example\n\n`htmlFor` must match the `id` (or `testID` on native) of the target control:\n\n<Preview name=\"label-basic\" />\n\n```tsx\nimport { Label, Switch } from '@nori-ui/core';\nimport { View } from 'react-native';\n\nexport default function NewsletterToggle() {\n    return (\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>\n            <Label htmlFor=\"newsletter\">Subscribe to newsletter</Label>\n            <Switch id=\"newsletter\" testID=\"newsletter\" />\n        </View>\n    );\n}\n```\n\nOn web, clicking the label text moves focus to and toggles the associated Switch.\nOn native, the label is presentational — wrap both in a `Pressable` if you need\nthe full tap target.\n\n## Required\n\nPass `required` to show the visual indicator and an accessible label on the\nindicator span (controlled by the same `field.requiredIndicator` /\n`field.requiredLabel` dictionary keys as `Field`):\n\n```tsx\nimport { Label, TextInput } from '@nori-ui/core';\n\n<Label htmlFor=\"email\" required>Email</Label>\n<TextInput id=\"email\" testID=\"email\" placeholder=\"you@example.com\" />\n```\n\n`<Label>` does not set `aria-required` on the target — that attribute lives on\nthe control, not the label. If you need ARIA threading, use `<Field>` with the\n`required` prop instead.\n\n## Disabled\n\nPass `disabled` to dim the label text. This is a visual hint only — it does not\ndisable the associated control:\n\n```tsx\nimport { Label, Switch } from '@nori-ui/core';\nimport { View } from 'react-native';\n\n<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>\n    <Label htmlFor=\"opt-in\" disabled>Receive updates</Label>\n    <Switch id=\"opt-in\" testID=\"opt-in\" disabled />\n</View>\n```\n\nDisable the control separately.\n\n## API reference\n\n<PropsTable component=\"Label\" />\n"
}