Label

Guidelines React

Github Storybook Markdown Copy for LLM

The Label provides clear and accessible text descriptions for inputs and interactive UI elements.

Import

import { Label } from "@cfa/react-core";

Live Editor

The <Label /> component is a HTML label element providing the accessibility implementation to their associated elements.

Examples

Required

The isRequired prop indicates that the associated input is required. It adds a red asterisk to the label.

Disabled

The isDisabled prop indicates that the associated input has disabled styling. It adds a gray color to the label.

Label + Input

For the most part, labels are built-in to the Design System’s components. For example, the TextInput component has a built-in label prop that associates the label with the input. This is the recommended way to use labels in the Design System.

You may also compose your own custom components. For example, you could build your own CustomTextInput component by using the Design System’s Label and Input components.

Make sure to connect the Label to the Input by using the htmlFor prop on the label and the id prop on the input.

Props

Visit the Documentation Site for the full list of props.

Label

Name	Type	Default	Description
isDisabled	boolean	-	Whether the Label is on a disabled input or element.
isRequired	boolean	-	Whether the Label is on a required input or element.
about	string	-	-
accessKey	string	-	-
aria-activedescendant	string	-	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic	Booleanish	-	Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete	"none" | "list" | "inline" | "both"	-	Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-braillelabel	string	-	Defines a string value that labels the current element, which is intended to be converted into Braille. @see aria-label.
aria-brailleroledescription	string	-	Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. @see aria-roledescription.
aria-busy	Booleanish	-	-
aria-checked	boolean | "true" | "false" | "mixed"	-	Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.
aria-colcount	number	-	Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.
aria-colindex	number	-	Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan.
aria-colindextext	string	-	Defines a human readable text alternative of aria-colindex. @see aria-rowindextext.
aria-colspan	number	-	Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.
aria-controls	string	-	Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.
aria-current	boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"	-	Indicates the element that represents the current item within a container or set of related elements.
aria-describedby	string	-	Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-description	string	-	Defines a string value that describes or annotates the current element. @see related aria-describedby.
aria-details	string	-	Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.
aria-disabled	Booleanish	-	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.
aria-dropeffect	"none" | "link" | "copy" | "execute" | "move" | "popup"	-	Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1
aria-errormessage	string	-	Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.
aria-expanded	Booleanish	-	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto	string	-	Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
aria-grabbed	Booleanish	-	Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1
aria-haspopup	boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"	-	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hidden	Booleanish	-	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-invalid	boolean | "true" | "false" | "grammar" | "spelling"	-	Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.
aria-keyshortcuts	string	-	Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label	string	-	Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby	string	-	Identifies the element (or elements) that labels the current element. @see aria-describedby.
aria-level	number	-	Defines the hierarchical level of an element within a structure.
aria-live	"off" | "assertive" | "polite"	-	Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modal	Booleanish	-	Indicates whether an element is modal when displayed.
aria-multiline	Booleanish	-	Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable	Booleanish	-	Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation	"horizontal" | "vertical"	-	Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
aria-owns	string	-	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls.
aria-placeholder	string	-	Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset	number	-	Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize.
aria-pressed	boolean | "true" | "false" | "mixed"	-	Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.
aria-readonly	Booleanish	-	Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.
aria-relevant	"text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"	-	Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.
aria-required	Booleanish	-	Indicates that user input is required on the element before a form may be submitted.
aria-roledescription	string	-	Defines a human-readable, author-localized description for the role of an element.
aria-rowcount	number	-	Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.
aria-rowindex	number	-	Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan.
aria-rowindextext	string	-	Defines a human readable text alternative of aria-rowindex. @see aria-colindextext.
aria-rowspan	number	-	Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.
aria-selected	Booleanish	-	Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed.
aria-setsize	number	-	Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset.
aria-sort	"none" | "ascending" | "descending" | "other"	-	Indicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemax	number	-	Defines the maximum allowed value for a range widget.
aria-valuemin	number	-	Defines the minimum allowed value for a range widget.
aria-valuenow	number	-	Defines the current value for a range widget. @see aria-valuetext.
aria-valuetext	string	-	Defines the human readable text alternative of aria-valuenow for a range widget.
autoCapitalize	"off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {})	-	-
autoCorrect	string	-	-
autoFocus	boolean	-	-
autoSave	string	-	-
className	string	-	-
color	string	-	-
content	string	-	-
contentEditable	Booleanish | "inherit" | "plaintext-only"	-	-
contextMenu	string	-	-
dangerouslySetInnerHTML	{ __html: string | TrustedHTML; }	-	-
datatype	string	-	-
defaultChecked	boolean	-	-
defaultValue	string | number | readonly string[]	-	-
dir	string	-	-
draggable	Booleanish	-	-
elementType	string	-	-
enterKeyHint	"enter" | "done" | "go" | "next" | "previous" | "search" | "send"	-	-
exportparts	string	-	@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}
form	string	-	-
hidden	boolean	-	-
htmlFor	string	-	-
id	string	-	-
inert	boolean	-	@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
inlist	any	-	-
inputMode	"none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"	-	Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute}
is	string	-	Specify that a standard HTML element should behave like a defined custom built-in element @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is}
itemID	string	-	-
itemProp	string	-	-
itemRef	string	-	-
itemScope	boolean	-	-
itemType	string	-	-
lang	string	-	-
nonce	string	-	-
onAbort	ReactEventHandler<HTMLLabelElement>	-	-
onAbortCapture	ReactEventHandler<HTMLLabelElement>	-	-
onAnimationEnd	AnimationEventHandler<HTMLLabelElement>	-	-
onAnimationEndCapture	AnimationEventHandler<HTMLLabelElement>	-	-
onAnimationIteration	AnimationEventHandler<HTMLLabelElement>	-	-
onAnimationIterationCapture	AnimationEventHandler<HTMLLabelElement>	-	-
onAnimationStart	AnimationEventHandler<HTMLLabelElement>	-	-
onAnimationStartCapture	AnimationEventHandler<HTMLLabelElement>	-	-
onAuxClick	MouseEventHandler<HTMLLabelElement>	-	-
onAuxClickCapture	MouseEventHandler<HTMLLabelElement>	-	-
onBeforeInput	InputEventHandler<HTMLLabelElement>	-	-
onBeforeInputCapture	FormEventHandler<HTMLLabelElement>	-	-
onBeforeToggle	ToggleEventHandler<HTMLLabelElement>	-	-
onBlur	FocusEventHandler<HTMLLabelElement>	-	-
onBlurCapture	FocusEventHandler<HTMLLabelElement>	-	-
onCanPlay	ReactEventHandler<HTMLLabelElement>	-	-
onCanPlayCapture	ReactEventHandler<HTMLLabelElement>	-	-
onCanPlayThrough	ReactEventHandler<HTMLLabelElement>	-	-
onCanPlayThroughCapture	ReactEventHandler<HTMLLabelElement>	-	-
onChange	FormEventHandler<HTMLLabelElement>	-	-
onChangeCapture	FormEventHandler<HTMLLabelElement>	-	-
onClick	MouseEventHandler<HTMLLabelElement>	-	-
onClickCapture	MouseEventHandler<HTMLLabelElement>	-	-
onCompositionEnd	CompositionEventHandler<HTMLLabelElement>	-	-
onCompositionEndCapture	CompositionEventHandler<HTMLLabelElement>	-	-
onCompositionStart	CompositionEventHandler<HTMLLabelElement>	-	-
onCompositionStartCapture	CompositionEventHandler<HTMLLabelElement>	-	-
onCompositionUpdate	CompositionEventHandler<HTMLLabelElement>	-	-
onCompositionUpdateCapture	CompositionEventHandler<HTMLLabelElement>	-	-
onContextMenu	MouseEventHandler<HTMLLabelElement>	-	-
onContextMenuCapture	MouseEventHandler<HTMLLabelElement>	-	-
onCopy	ClipboardEventHandler<HTMLLabelElement>	-	-
onCopyCapture	ClipboardEventHandler<HTMLLabelElement>	-	-
onCut	ClipboardEventHandler<HTMLLabelElement>	-	-
onCutCapture	ClipboardEventHandler<HTMLLabelElement>	-	-
onDoubleClick	MouseEventHandler<HTMLLabelElement>	-	-
onDoubleClickCapture	MouseEventHandler<HTMLLabelElement>	-	-
onDrag	DragEventHandler<HTMLLabelElement>	-	-
onDragCapture	DragEventHandler<HTMLLabelElement>	-	-
onDragEnd	DragEventHandler<HTMLLabelElement>	-	-
onDragEndCapture	DragEventHandler<HTMLLabelElement>	-	-
onDragEnter	DragEventHandler<HTMLLabelElement>	-	-
onDragEnterCapture	DragEventHandler<HTMLLabelElement>	-	-
onDragExit	DragEventHandler<HTMLLabelElement>	-	-
onDragExitCapture	DragEventHandler<HTMLLabelElement>	-	-
onDragLeave	DragEventHandler<HTMLLabelElement>	-	-
onDragLeaveCapture	DragEventHandler<HTMLLabelElement>	-	-
onDragOver	DragEventHandler<HTMLLabelElement>	-	-
onDragOverCapture	DragEventHandler<HTMLLabelElement>	-	-
onDragStart	DragEventHandler<HTMLLabelElement>	-	-
onDragStartCapture	DragEventHandler<HTMLLabelElement>	-	-
onDrop	DragEventHandler<HTMLLabelElement>	-	-
onDropCapture	DragEventHandler<HTMLLabelElement>	-	-
onDurationChange	ReactEventHandler<HTMLLabelElement>	-	-
onDurationChangeCapture	ReactEventHandler<HTMLLabelElement>	-	-
onEmptied	ReactEventHandler<HTMLLabelElement>	-	-
onEmptiedCapture	ReactEventHandler<HTMLLabelElement>	-	-
onEncrypted	ReactEventHandler<HTMLLabelElement>	-	-
onEncryptedCapture	ReactEventHandler<HTMLLabelElement>	-	-
onEnded	ReactEventHandler<HTMLLabelElement>	-	-
onEndedCapture	ReactEventHandler<HTMLLabelElement>	-	-
onError	ReactEventHandler<HTMLLabelElement>	-	-
onErrorCapture	ReactEventHandler<HTMLLabelElement>	-	-
onFocus	FocusEventHandler<HTMLLabelElement>	-	-
onFocusCapture	FocusEventHandler<HTMLLabelElement>	-	-
onGotPointerCapture	PointerEventHandler<HTMLLabelElement>	-	-
onGotPointerCaptureCapture	PointerEventHandler<HTMLLabelElement>	-	-
onInput	FormEventHandler<HTMLLabelElement>	-	-
onInputCapture	FormEventHandler<HTMLLabelElement>	-	-
onInvalid	FormEventHandler<HTMLLabelElement>	-	-
onInvalidCapture	FormEventHandler<HTMLLabelElement>	-	-
onKeyDown	KeyboardEventHandler<HTMLLabelElement>	-	-
onKeyDownCapture	KeyboardEventHandler<HTMLLabelElement>	-	-
onKeyPress	KeyboardEventHandler<HTMLLabelElement>	-	@deprecated Use `onKeyUp` or `onKeyDown` instead
onKeyPressCapture	KeyboardEventHandler<HTMLLabelElement>	-	@deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead
onKeyUp	KeyboardEventHandler<HTMLLabelElement>	-	-
onKeyUpCapture	KeyboardEventHandler<HTMLLabelElement>	-	-
onLoad	ReactEventHandler<HTMLLabelElement>	-	-
onLoadCapture	ReactEventHandler<HTMLLabelElement>	-	-
onLoadedData	ReactEventHandler<HTMLLabelElement>	-	-
onLoadedDataCapture	ReactEventHandler<HTMLLabelElement>	-	-
onLoadedMetadata	ReactEventHandler<HTMLLabelElement>	-	-
onLoadedMetadataCapture	ReactEventHandler<HTMLLabelElement>	-	-
onLoadStart	ReactEventHandler<HTMLLabelElement>	-	-
onLoadStartCapture	ReactEventHandler<HTMLLabelElement>	-	-
onLostPointerCapture	PointerEventHandler<HTMLLabelElement>	-	-
onLostPointerCaptureCapture	PointerEventHandler<HTMLLabelElement>	-	-
onMouseDown	MouseEventHandler<HTMLLabelElement>	-	-
onMouseDownCapture	MouseEventHandler<HTMLLabelElement>	-	-
onMouseEnter	MouseEventHandler<HTMLLabelElement>	-	-
onMouseLeave	MouseEventHandler<HTMLLabelElement>	-	-
onMouseMove	MouseEventHandler<HTMLLabelElement>	-	-
onMouseMoveCapture	MouseEventHandler<HTMLLabelElement>	-	-
onMouseOut	MouseEventHandler<HTMLLabelElement>	-	-
onMouseOutCapture	MouseEventHandler<HTMLLabelElement>	-	-
onMouseOver	MouseEventHandler<HTMLLabelElement>	-	-
onMouseOverCapture	MouseEventHandler<HTMLLabelElement>	-	-
onMouseUp	MouseEventHandler<HTMLLabelElement>	-	-
onMouseUpCapture	MouseEventHandler<HTMLLabelElement>	-	-
onPaste	ClipboardEventHandler<HTMLLabelElement>	-	-
onPasteCapture	ClipboardEventHandler<HTMLLabelElement>	-	-
onPause	ReactEventHandler<HTMLLabelElement>	-	-
onPauseCapture	ReactEventHandler<HTMLLabelElement>	-	-
onPlay	ReactEventHandler<HTMLLabelElement>	-	-
onPlayCapture	ReactEventHandler<HTMLLabelElement>	-	-
onPlaying	ReactEventHandler<HTMLLabelElement>	-	-
onPlayingCapture	ReactEventHandler<HTMLLabelElement>	-	-
onPointerCancel	PointerEventHandler<HTMLLabelElement>	-	-
onPointerCancelCapture	PointerEventHandler<HTMLLabelElement>	-	-
onPointerDown	PointerEventHandler<HTMLLabelElement>	-	-
onPointerDownCapture	PointerEventHandler<HTMLLabelElement>	-	-
onPointerEnter	PointerEventHandler<HTMLLabelElement>	-	-
onPointerLeave	PointerEventHandler<HTMLLabelElement>	-	-
onPointerMove	PointerEventHandler<HTMLLabelElement>	-	-
onPointerMoveCapture	PointerEventHandler<HTMLLabelElement>	-	-
onPointerOut	PointerEventHandler<HTMLLabelElement>	-	-
onPointerOutCapture	PointerEventHandler<HTMLLabelElement>	-	-
onPointerOver	PointerEventHandler<HTMLLabelElement>	-	-
onPointerOverCapture	PointerEventHandler<HTMLLabelElement>	-	-
onPointerUp	PointerEventHandler<HTMLLabelElement>	-	-
onPointerUpCapture	PointerEventHandler<HTMLLabelElement>	-	-
onProgress	ReactEventHandler<HTMLLabelElement>	-	-
onProgressCapture	ReactEventHandler<HTMLLabelElement>	-	-
onRateChange	ReactEventHandler<HTMLLabelElement>	-	-
onRateChangeCapture	ReactEventHandler<HTMLLabelElement>	-	-
onReset	FormEventHandler<HTMLLabelElement>	-	-
onResetCapture	FormEventHandler<HTMLLabelElement>	-	-
onScroll	UIEventHandler<HTMLLabelElement>	-	-
onScrollCapture	UIEventHandler<HTMLLabelElement>	-	-
onScrollEnd	UIEventHandler<HTMLLabelElement>	-	-
onScrollEndCapture	UIEventHandler<HTMLLabelElement>	-	-
onSeeked	ReactEventHandler<HTMLLabelElement>	-	-
onSeekedCapture	ReactEventHandler<HTMLLabelElement>	-	-
onSeeking	ReactEventHandler<HTMLLabelElement>	-	-
onSeekingCapture	ReactEventHandler<HTMLLabelElement>	-	-
onSelect	ReactEventHandler<HTMLLabelElement>	-	-
onSelectCapture	ReactEventHandler<HTMLLabelElement>	-	-
onStalled	ReactEventHandler<HTMLLabelElement>	-	-
onStalledCapture	ReactEventHandler<HTMLLabelElement>	-	-
onSubmit	FormEventHandler<HTMLLabelElement>	-	-
onSubmitCapture	FormEventHandler<HTMLLabelElement>	-	-
onSuspend	ReactEventHandler<HTMLLabelElement>	-	-
onSuspendCapture	ReactEventHandler<HTMLLabelElement>	-	-
onTimeUpdate	ReactEventHandler<HTMLLabelElement>	-	-
onTimeUpdateCapture	ReactEventHandler<HTMLLabelElement>	-	-
onToggle	ToggleEventHandler<HTMLLabelElement>	-	-
onTouchCancel	TouchEventHandler<HTMLLabelElement>	-	-
onTouchCancelCapture	TouchEventHandler<HTMLLabelElement>	-	-
onTouchEnd	TouchEventHandler<HTMLLabelElement>	-	-
onTouchEndCapture	TouchEventHandler<HTMLLabelElement>	-	-
onTouchMove	TouchEventHandler<HTMLLabelElement>	-	-
onTouchMoveCapture	TouchEventHandler<HTMLLabelElement>	-	-
onTouchStart	TouchEventHandler<HTMLLabelElement>	-	-
onTouchStartCapture	TouchEventHandler<HTMLLabelElement>	-	-
onTransitionCancel	TransitionEventHandler<HTMLLabelElement>	-	-
onTransitionCancelCapture	TransitionEventHandler<HTMLLabelElement>	-	-
onTransitionEnd	TransitionEventHandler<HTMLLabelElement>	-	-
onTransitionEndCapture	TransitionEventHandler<HTMLLabelElement>	-	-
onTransitionRun	TransitionEventHandler<HTMLLabelElement>	-	-
onTransitionRunCapture	TransitionEventHandler<HTMLLabelElement>	-	-
onTransitionStart	TransitionEventHandler<HTMLLabelElement>	-	-
onTransitionStartCapture	TransitionEventHandler<HTMLLabelElement>	-	-
onVolumeChange	ReactEventHandler<HTMLLabelElement>	-	-
onVolumeChangeCapture	ReactEventHandler<HTMLLabelElement>	-	-
onWaiting	ReactEventHandler<HTMLLabelElement>	-	-
onWaitingCapture	ReactEventHandler<HTMLLabelElement>	-	-
onWheel	WheelEventHandler<HTMLLabelElement>	-	-
onWheelCapture	WheelEventHandler<HTMLLabelElement>	-	-
part	string	-	@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}
popover	"" | "auto" | "manual" | "hint"	-	-
popoverTarget	string	-	-
popoverTargetAction	"toggle" | "show" | "hide"	-	-
prefix	string	-	-
property	string	-	-
radioGroup	string	-	-
rel	string	-	-
render	DOMRenderFunction<"label", undefined>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: * You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). * Only a single root DOM element can be rendered (no fragments). * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
resource	string	-	-
results	number	-	-
rev	string	-	-
role	AriaRole	-	-
security	string	-	-
slot	string	-	-
spellCheck	Booleanish	-	-
style	CSSProperties	-	-
suppressContentEditableWarning	boolean	-	-
suppressHydrationWarning	boolean	-	-
tabIndex	number	-	-
title	string	-	-
translate	"yes" | "no"	-	-
typeof	string	-	-
unselectable	"off" | "on"	-	-
vocab	string	-	-