Label

Supports nested controls and custom controls.
Sizable and styleable inline.
Works on web with aria-labelledby.

Installation

Label is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/label

Usage

import { Label } from '@hanzo/gui'

export default () => (
  <>
    <Label htmlFor="name">Name</Label>
    <Input id="name" defaultValue="Nate Wienert" />
  </>
)

Accessibility

Use with Input or other form elements to automatically get correct labelling by id and aria-labelledby. You can also use the provided useLabelContext hook to build your own controls.

Label supports all standard ARIA attributes for form accessibility. These work on both web and React Native - see the React Native Accessibility docs for native behavior.

Required Fields

<Label htmlFor="email" aria-required>
  Email
</Label>
<Input id="email" aria-required />

Invalid State

<Label htmlFor="email" aria-invalid={hasError}>
  Email
</Label>
<Input id="email" aria-invalid={hasError} aria-errormessage="email-error" />
{hasError && <Text id="email-error">Please enter a valid email</Text>}

With Description

<Label htmlFor="password" aria-describedby="password-hint">
  Password
</Label>
<Input id="password" aria-describedby="password-hint" />
<Text id="password-hint">Must be at least 8 characters</Text>

API Reference

Labels extend SizableText inheriting all the Gui standard props, plus:

Prop	Type	Default	Required
htmlFor	string	-	✓
unstyled	boolean	-	-

Accessibility Props

Label passes through all ARIA attributes. These are the most commonly used for form labeling:

Prop	Type	Default	Required
aria-required	boolean	-	-
aria-invalid	boolean	-	-
aria-disabled	boolean	-	-
aria-describedby	string	-	-
aria-labelledby	string	-	-
aria-details	string	-	-

These props work cross-platform. On web they render as standard ARIA attributes. On React Native they map to the native accessibility system. See the React Native Accessibility docs for details.

Label

On this page