blob: 99d31e7617a592c83059bf535774e2076d195599 (
plain)
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
|
import { FC, ReactNode } from 'react';
import styles from './fieldset.module.scss';
export type FieldsetProps = {
/**
* The fieldset body.
*/
children: ReactNode | ReactNode[];
/**
* Set additional classnames to the fieldset wrapper.
*/
className?: string;
/**
* The fieldset legend.
*/
legend: string;
/**
* Set additional classnames to the legend.
*/
legendClassName?: string;
/**
* The legend position. Default: stacked.
*/
legendPosition?: 'inline' | 'stacked';
/**
* An accessible role. Default: group.
*/
role?: 'group' | 'radiogroup' | 'presentation' | 'none';
};
/**
* Fieldset component
*
* Render a fieldset with a legend.
*/
const Fieldset: FC<FieldsetProps> = ({
children,
className = '',
legend,
legendClassName = '',
legendPosition = 'stacked',
...props
}) => {
const wrapperModifier = `wrapper--${legendPosition}`;
return (
<fieldset
className={`${styles.wrapper} ${styles[wrapperModifier]} ${className}`}
{...props}
>
<legend className={`${styles.legend} ${legendClassName}`}>
{legend}
</legend>
{children}
</fieldset>
);
};
export default Fieldset;
|
