-
Notifications
You must be signed in to change notification settings - Fork 14
/
InputLabel.tsx
70 lines (55 loc) · 1.7 KB
/
InputLabel.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React, { ReactNode } from 'react';
import { Message, UniversalMessageValues } from '~types';
import { getMainClasses } from '~utils/css';
import { formatText } from '~utils/intl';
import { InputComponentAppearance as Appearance } from '../Input';
import styles from './InputLabel.css';
const displayName = 'InputLabel';
interface Props {
/** Appearance object */
appearance?: Appearance;
/** Extra node to render on the top right in the label */
extra?: ReactNode;
/** Help text (will appear next to label text) */
help?: Message;
/** Values for help text (react-intl interpolation) */
helpValues?: UniversalMessageValues;
/** `id` attribute value of accompanied input field */
inputId?: string;
/** Label text */
label: Message;
/** Values for label text (react-intl interpolation) */
labelValues?: UniversalMessageValues;
/** Should only be visible for screenreaders, but not for display users */
screenReaderOnly?: boolean;
}
const InputLabel = ({
appearance,
help,
helpValues,
extra,
inputId = '',
label: inputLabel,
labelValues,
screenReaderOnly = false,
}: Props) => {
const helpText = formatText(help, helpValues);
const labelText = formatText(inputLabel, labelValues);
return (
<label
className={getMainClasses(appearance, styles, {
screenReaderOnly,
})}
id={inputId ? `${inputId}-label` : undefined}
htmlFor={inputId || undefined}
>
<div>
<span className={styles.labelText}>{labelText}</span>
{helpText && <span className={styles.help}>{helpText}</span>}
</div>
{extra && <span>{extra}</span>}
</label>
);
};
InputLabel.displayName = displayName;
export default InputLabel;