InputLabel

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

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/ds-allium'

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

The component is available on both native platforms and web.

info

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

Props

Name	Type	Default	Description
copy	'en' | 'fr'	'en'	Whether the English or French copy will be used (e.g. for accessibility labels).
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.
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.
tokens	custom		System tokens prop, see tokens for more details
tooltip	string		Content of an optional 'Tooltip'. If set, a tooltip button will be shown next to the label.
variant	objectOf		System variant prop, see variants for more details

Tokens

In exceptional circumstances, the following tokens can be passed to this component to override its default styles. Do not do this unless absolutely necessary. Read more about overriding styles.

View Tokens

Prop Name	Token Property	Token Type
tokens	gap	size
	color	color
	fontName	fontName
	fontWeight	fontWeight
	fontSize	fontSize
	lineHeight	lineHeight
	hintColor	color
	hintFontName	fontName
	hintFontWeight	fontWeight
	hintFontSize	fontSize
	hintLineHeight	lineHeight

Figma

Variants

This component does not have any stylistic variants.

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support