@salesforce/design-system-react/components/utilities/label/index.jsx

Salesforce Lightning Design System for React

/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const propTypes = {
	/*
	 * Assistive Text to use instead of a visible label
	 */
	assistiveText: PropTypes.object,
	/**
	 * Class names to be added to the label
	 */
	className: PropTypes.oneOfType([
		PropTypes.array,
		PropTypes.object,
		PropTypes.string,
	]),
	/*
	 * Id of the input associated with this label
	 */
	htmlFor: PropTypes.string,
	/*
	 * Input Label
	 */
	label: PropTypes.string,
	/*
	 * Applies label styling for a required form element
	 */
	required: PropTypes.bool,
	/**
	 * Changes markup of label.
	 */
	variant: PropTypes.oneOf(['base', 'static']),
};

const defaultProps = {
	variant: 'base',
};

/*
 * Form label. This returns null if there is no label text (hidden or shown)
 */
const Label = (props) => {
	const labelText =
		props.label || (props.assistiveText && props.assistiveText.label); // One of these is required to pass accessibility tests

	const subRenders = {
		base: (
			<label
				className={classNames(
					'slds-form-element__label',
					{
						'slds-assistive-text': props.assistiveText && !props.label,
					},
					props.className
				)}
				htmlFor={props.htmlFor}
			>
				{props.required && (
					<abbr className="slds-required" title="required">
						*
					</abbr>
				)}
				{labelText}
			</label>
		),
		static: (
			<span className={classNames('slds-form-element__label', props.className)}>
				{labelText}
			</span>
		),
	};

	return labelText ? subRenders[props.variant] : null;
};

Label.displayName = 'Label';
Label.propTypes = propTypes;
Label.defaultProps = defaultProps;

export default Label;