Files
shlink-web-client/shlink-frontend-kit/src/form/LabeledFormGroup.tsx
2023-08-03 09:13:10 +02:00

20 lines
604 B
TypeScript

import type { FC, PropsWithChildren, ReactNode } from 'react';
type LabeledFormGroupProps = PropsWithChildren<{
label: ReactNode;
noMargin?: boolean;
className?: string;
labelClassName?: string;
id?: string;
}>;
/* eslint-disable jsx-a11y/label-has-associated-control */
export const LabeledFormGroup: FC<LabeledFormGroupProps> = (
{ children, label, className = '', labelClassName = '', noMargin = false, id },
) => (
<div className={`${className} ${noMargin ? '' : 'mb-3'}`}>
<label className={`form-label ${labelClassName}`} htmlFor={id}>{label}</label>
{children}
</div>
);