3d18d02846
* Add a dark version of the checkbox component * Add theming to storybook * Fix storybook * adding correct border colors --------- Co-authored-by: davibaweja <davibaweja@gmail.com> GitOrigin-RevId: e350ab7a0800edd960d99bb892e527b97106b17d
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { Form, FormCheckProps } from 'react-bootstrap'
|
|
import { MergeAndOverride } from '../../../../../types/utils'
|
|
import FormText from '../form/form-text'
|
|
|
|
type OLFormCheckboxProps = MergeAndOverride<
|
|
FormCheckProps,
|
|
{
|
|
inputRef?: React.MutableRefObject<HTMLInputElement | null>
|
|
} & (
|
|
| { description: string; id: string }
|
|
| { description?: undefined; id?: string }
|
|
)
|
|
>
|
|
|
|
function OLFormCheckbox(props: OLFormCheckboxProps) {
|
|
const { inputRef, ...rest } = props
|
|
|
|
return rest.type === 'radio' ? (
|
|
<Form.Check
|
|
ref={inputRef}
|
|
aria-describedby={rest.description ? `${rest.id}-description` : undefined}
|
|
{...rest}
|
|
label={
|
|
<>
|
|
{rest.label}
|
|
{rest.description && (
|
|
<FormText
|
|
id={`${rest.id}-description`}
|
|
className="form-check-label-description"
|
|
>
|
|
{rest.description}
|
|
</FormText>
|
|
)}
|
|
</>
|
|
}
|
|
/>
|
|
) : (
|
|
<Form.Check className="form-checkbox" ref={inputRef} {...rest} />
|
|
)
|
|
}
|
|
|
|
export default OLFormCheckbox
|