InputLabel

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

Loading...

<InputLabel label="Input label" hint="Short hint" hintPosition="inline" tooltip="This is the tooltip's content" />

<InputLabel
  label="Input label"
  hint="Short hint"
  hintPosition="inline"
  tooltip="This is the tooltip's content"
/>

Introduction

import { InputLabel } from '@telus-uds/components-base'

InputLabel is typically used as part of an input component, but it can also be used separately, or in combination with custom form elements.

Guidance

info

Coming soon!

Accessibility

Make sure to pass the forId and hintId props, and use the hintId identifiers for labelling the input (aria-labelledby). The forId prop will bind the label to the input, keeping the label inaccessible (avoiding a double screenreader's focus on the same label).

Platform considerations

info

On Native the aria attributes are replaced with the accessibilityHint prop.

Props

Name	Type	Default	Description
hintPosition	'inline' | 'below'	'inline'	Position of the hint relative to label. Use `below` to display a larger hint below the label.
label*	string		The input label.
forId	string		The id attribute of the input which this label refers to.
hint	string		A short description of the expected input.
hintId	string		The id attribute passed down to the hint element.
tooltip	string		Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details