aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/forms/label.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms/forms/label.tsx')
-rw-r--r--src/components/atoms/forms/label.tsx23
1 files changed, 5 insertions, 18 deletions
diff --git a/src/components/atoms/forms/label.tsx b/src/components/atoms/forms/label.tsx
index 2ec614f..6764579 100644
--- a/src/components/atoms/forms/label.tsx
+++ b/src/components/atoms/forms/label.tsx
@@ -1,24 +1,12 @@
-import { FC, ReactNode } from 'react';
+import { FC, LabelHTMLAttributes, ReactNode } from 'react';
import styles from './label.module.scss';
-export type LabelProps = {
- /**
- * An accessible name for the label.
- */
- 'aria-label'?: string;
+export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
/**
* The label body.
*/
children: ReactNode;
/**
- * Add classnames to the label.
- */
- className?: string;
- /**
- * The field id.
- */
- htmlFor?: string;
- /**
* Is the field required? Default: false.
*/
required?: boolean;
@@ -33,7 +21,7 @@ export type LabelProps = {
*
* Render a HTML label element.
*/
-const Label: FC<LabelProps> = ({
+export const Label: FC<LabelProps> = ({
children,
className = '',
required = false,
@@ -41,13 +29,12 @@ const Label: FC<LabelProps> = ({
...props
}) => {
const sizeClass = styles[`label--${size}`];
+ const labelClass = `${styles.label} ${sizeClass} ${className}`;
return (
- <label className={`${styles.label} ${sizeClass} ${className}`} {...props}>
+ <label {...props} className={labelClass}>
{children}
{required && <span className={styles.required}> *</span>}
</label>
);
};
-
-export default Label;