Skip to content

FormLabel

const FormLabel: NamedExoticComponent<{ about?: string; accessKey?: string; aria-activedescendant?: string; aria-atomic?: Booleanish; aria-autocomplete?: "none" | "inline" | "both" | "list"; aria-braillelabel?: string; aria-brailleroledescription?: string; aria-busy?: Booleanish; aria-checked?: boolean | "mixed" | "false" | "true"; aria-colcount?: number; aria-colindex?: number; aria-colindextext?: string; aria-colspan?: number; aria-controls?: string; aria-current?: boolean | "page" | "false" | "true" | "step" | "location" | "date" | "time"; aria-describedby?: string; aria-description?: string; aria-details?: string; aria-disabled?: Booleanish; aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"; aria-errormessage?: string; aria-expanded?: Booleanish; aria-flowto?: string; aria-grabbed?: Booleanish; aria-haspopup?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree"; aria-hidden?: Booleanish; aria-invalid?: boolean | "false" | "true" | "grammar" | "spelling"; aria-keyshortcuts?: string; aria-label?: string; aria-labelledby?: string; aria-level?: number; aria-live?: "off" | "assertive" | "polite"; aria-modal?: Booleanish; aria-multiline?: Booleanish; aria-multiselectable?: Booleanish; aria-orientation?: "horizontal" | "vertical"; aria-owns?: string; aria-placeholder?: string; aria-posinset?: number; aria-pressed?: boolean | "mixed" | "false" | "true"; aria-readonly?: Booleanish; aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"; aria-required?: Booleanish; aria-roledescription?: string; aria-rowcount?: number; aria-rowindex?: number; aria-rowindextext?: string; aria-rowspan?: number; aria-selected?: Booleanish; aria-setsize?: number; aria-sort?: "none" | "ascending" | "descending" | "other"; aria-valuemax?: number; aria-valuemin?: number; aria-valuenow?: number; aria-valuetext?: string; autoCapitalize?: "none" | string & object | "off" | "on" | "sentences" | "words" | "characters"; autoCorrect?: string; autoFocus?: boolean; autoSave?: string; children: ReactNode; className?: string; color?: string; content?: string; contentEditable?: "inherit" | Booleanish | "plaintext-only"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; disabled?: boolean; draggable?: Booleanish; enterKeyHint?: "search" | "next" | "enter" | "done" | "go" | "previous" | "send"; exportparts?: string; hidden?: boolean; htmlFor?: string; id?: string; inert?: boolean; inlist?: any; inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"; is?: string; 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?: InputEventHandler<HTMLLabelElement>; onBeforeToggle?: ToggleEventHandler<HTMLLabelElement>; onBlur?: FocusEventHandler<HTMLLabelElement>; onBlurCapture?: FocusEventHandler<HTMLLabelElement>; onCanPlay?: ReactEventHandler<HTMLLabelElement>; onCanPlayCapture?: ReactEventHandler<HTMLLabelElement>; onCanPlayThrough?: ReactEventHandler<HTMLLabelElement>; onCanPlayThroughCapture?: ReactEventHandler<HTMLLabelElement>; onChange?: ChangeEventHandler<HTMLLabelElement, Element>; onChangeCapture?: ChangeEventHandler<HTMLLabelElement, Element>; 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?: InputEventHandler<HTMLLabelElement>; onInputCapture?: InputEventHandler<HTMLLabelElement>; onInvalid?: ReactEventHandler<HTMLLabelElement>; onInvalidCapture?: ReactEventHandler<HTMLLabelElement>; onKeyDown?: KeyboardEventHandler<HTMLLabelElement>; onKeyDownCapture?: KeyboardEventHandler<HTMLLabelElement>; onKeyPress?: KeyboardEventHandler<HTMLLabelElement>; onKeyPressCapture?: KeyboardEventHandler<HTMLLabelElement>; 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?: ReactEventHandler<HTMLLabelElement>; onResetCapture?: ReactEventHandler<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?: SubmitEventHandler<HTMLLabelElement>; onSubmitCapture?: SubmitEventHandler<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; popover?: "" | "auto" | "manual" | "hint"; popoverTarget?: string; popoverTargetAction?: "hide" | "show" | "toggle"; prefix?: string; property?: string; radioGroup?: string; ref?: Ref<HTMLLabelElement>; rel?: string; required?: boolean; resource?: string; results?: number; rev?: string; role?: AriaRole; security?: string; slot?: string; spellCheck?: Booleanish; style?: CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; testId?: string; title?: string; translate?: "yes" | "no"; typeof?: string; unselectable?: "off" | "on"; vocab?: string; }>

Defined in: src/components/form/FormLabel.tsx:49

A standardized form label component for use with form controls.

Provides consistent styling and behavior for labels across different form components, with support for required indicators and disabled states.

Example

<FormLabel htmlFor="name-input" required>
Full Name
</FormLabel>
<Input id="name-input" />