BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

Update radio button with input suggestions

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-12 20:59:24 -05:00
parent 12ee0bc7ad
commit 1e8e0d3138
4 changed files with 45 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
lib/component/input/checkbox/MattrixwvCheckbox.tsx
View File

@@ -5,7 +5,7 @@ import { forwardRef } from "react";
const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
id, id = crypto.randomUUID().replaceAll("-", ""),
className, className,
labelClassName, labelClassName,
name, name,
@@ -17,7 +17,6 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
strokeWidth = 2, strokeWidth = 2,
value, value,
disabled, disabled,
ariaLabel,
children children
}, ref ) => { }, ref ) => {
return ( return (
@@ -26,6 +25,7 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className={clsx( className={clsx(
"group", "group",
"flex flex-row items-center justify-start gap-x-2", "flex flex-row items-center justify-start gap-x-2",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
{ {
"cursor-pointer": !disabled, "cursor-pointer": !disabled,
"cursor-not-allowed": disabled "cursor-not-allowed": disabled
@@ -37,7 +37,7 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
onChange={onChange} onChange={onChange}
value={value} value={value}
disabled={disabled} disabled={disabled}
aria-label={ariaLabel} aria-labelledby={`${id}Label`}
ref={ref} ref={ref}
> >
{/* Checkbox */} {/* Checkbox */}
@@ -73,11 +73,12 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
{/* Label */} {/* Label */}
{ {
children && children &&
<div <span
id={`${id}Label`}
className={labelClassName} className={labelClassName}
> >
{children} {children}
</div> </span>
} }
</Checkbox> </Checkbox>
); );

20
lib/component/input/radio/RadioButton.tsx
View File

@@ -5,18 +5,29 @@ import { forwardRef } from "react";
const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
id, id = crypto.randomUUID().replaceAll("-", ""),
className, className,
labelClassName, labelClassName,
size = "sm", size = "sm",
value, value,
disabled,
children children
}, ref ) => { }, ref ) => {
return ( return (
<Radio <Radio
id={id} id={id}
value={value} value={value}
className="group flex flex-row items-center justify-center gap-x-2 cursor-pointer" className={clsx(
"group",
"flex flex-row items-center justify-center gap-x-2",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
{
"cursor-pointer": !disabled,
"cursor-not-allowed": disabled
}
)}
disabled={disabled}
aria-labelledby={`${id}Label`}
ref={ref} ref={ref}
> >
<div <div
@@ -35,11 +46,12 @@ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
/> />
{ {
children && children &&
<div <span
id={`${id}Label`}
className={labelClassName} className={labelClassName}
> >
{children} {children}
</div> </span>
} }
</Radio> </Radio>
); );

2
lib/types/InputTypes.ts
View File

@@ -137,7 +137,6 @@ export interface CheckboxProps {
strokeWidth?: number; strokeWidth?: number;
value?: string; value?: string;
disabled?: boolean; disabled?: boolean;
ariaLabel: string;
children?: React.ReactNode; children?: React.ReactNode;
} }
@@ -149,6 +148,7 @@ export interface RadioButtonProps {
labelClassName?: string; labelClassName?: string;
size?: RadioButtonSize; size?: RadioButtonSize;
value: string; value: string;
disabled?: boolean;
children?: React.ReactNode; children?: React.ReactNode;
} }

44
src/util/InputUtils.tsx
View File

@@ -687,32 +687,32 @@ export function CheckboxContent(){
> >
<CheckboxDisplay title="Checkbox"> <CheckboxDisplay title="Checkbox">
<div className="flex flex-row items-center justify-center gap-x-8"> <div className="flex flex-row items-center justify-center gap-x-8">
<MattrixwvCheckbox className="group-data-checked:stroke-white group-data-checked:bg-amber-400" defaultChecked={true} ariaLabel="Default Checkbox">Default</MattrixwvCheckbox> <MattrixwvCheckbox className="group-data-checked:stroke-white group-data-checked:bg-amber-400" defaultChecked={true}>Default</MattrixwvCheckbox>
<PrimaryCheckbox defaultChecked={true} ariaLabel="Primary Checkbox">Primary</PrimaryCheckbox> <PrimaryCheckbox defaultChecked={true} >Primary</PrimaryCheckbox>
<SecondaryCheckbox defaultChecked={true} ariaLabel="Secondary Checkbox">Secondary</SecondaryCheckbox> <SecondaryCheckbox defaultChecked={true}>Secondary</SecondaryCheckbox>
<TertiaryCheckbox defaultChecked={true} ariaLabel="Tertiary Checkbox">Tertiary</TertiaryCheckbox> <TertiaryCheckbox defaultChecked={true}>Tertiary</TertiaryCheckbox>
<InfoCheckbox defaultChecked={true} ariaLabel="Info Checkbox">Info</InfoCheckbox> <InfoCheckbox defaultChecked={true}>Info</InfoCheckbox>
<SuccessCheckbox defaultChecked={true} ariaLabel="Success Checkbox">Success</SuccessCheckbox> <SuccessCheckbox defaultChecked={true}>Success</SuccessCheckbox>
<WarningCheckbox defaultChecked={true} ariaLabel="Warning Checkbox">Warning</WarningCheckbox> <WarningCheckbox defaultChecked={true}>Warning</WarningCheckbox>
<DangerCheckbox defaultChecked={true} ariaLabel="Danger Checkbox">Danger</DangerCheckbox> <DangerCheckbox defaultChecked={true}>Danger</DangerCheckbox>
<MoltenCheckbox defaultChecked={true} ariaLabel="Molten Checkbox">Molten</MoltenCheckbox> <MoltenCheckbox defaultChecked={true}>Molten</MoltenCheckbox>
<LightCheckbox defaultChecked={true} ariaLabel="Light Checkbox">Light</LightCheckbox> <LightCheckbox defaultChecked={true}>Light</LightCheckbox>
<DarkCheckbox defaultChecked={true} ariaLabel="Dark Checkbox">Dark</DarkCheckbox> <DarkCheckbox defaultChecked={true}>Dark</DarkCheckbox>
</div> </div>
</CheckboxDisplay> </CheckboxDisplay>
<CheckboxDisplay title="Checks"> <CheckboxDisplay title="Checks">
<div className="flex flex-row items-center justify-center gap-x-8"> <div className="flex flex-row items-center justify-center gap-x-8">
<MattrixwvCheckbox className="group-data-checked:stroke-amber-400 not-group-data-checked:stroke-white" defaultChecked={true} showBox={false} ariaLabel="Default Checkbox">Default</MattrixwvCheckbox> <MattrixwvCheckbox className="group-data-checked:stroke-amber-400" defaultChecked={true} showBox={false}>Default</MattrixwvCheckbox>
<PrimaryCheckbox defaultChecked={true} showBox={false} ariaLabel="Primary Checkbox">Primary</PrimaryCheckbox> <PrimaryCheckbox defaultChecked={true} showBox={false}>Primary</PrimaryCheckbox>
<SecondaryCheckbox defaultChecked={true} showBox={false} ariaLabel="Secondary Checkbox">Secondary</SecondaryCheckbox> <SecondaryCheckbox defaultChecked={true} showBox={false}>Secondary</SecondaryCheckbox>
<TertiaryCheckbox defaultChecked={true} showBox={false} ariaLabel="Tertiary Checkbox">Tertiary</TertiaryCheckbox> <TertiaryCheckbox defaultChecked={true} showBox={false}>Tertiary</TertiaryCheckbox>
<InfoCheckbox defaultChecked={true} showBox={false} ariaLabel="Info Checkbox">Info</InfoCheckbox> <InfoCheckbox defaultChecked={true} showBox={false}>Info</InfoCheckbox>
<SuccessCheckbox defaultChecked={true} showBox={false} ariaLabel="Success Checkbox">Success</SuccessCheckbox> <SuccessCheckbox defaultChecked={true} showBox={false}>Success</SuccessCheckbox>
<WarningCheckbox defaultChecked={true} showBox={false} ariaLabel="Warning Checkbox">Warning</WarningCheckbox> <WarningCheckbox defaultChecked={true} showBox={false}>Warning</WarningCheckbox>
<DangerCheckbox defaultChecked={true} showBox={false} ariaLabel="Danger Checkbox">Danger</DangerCheckbox> <DangerCheckbox defaultChecked={true} showBox={false}>Danger</DangerCheckbox>
<MoltenCheckbox defaultChecked={true} showBox={false} ariaLabel="Molten Checkbox">Molten</MoltenCheckbox> <MoltenCheckbox defaultChecked={true} showBox={false}>Molten</MoltenCheckbox>
<LightCheckbox defaultChecked={true} showBox={false} ariaLabel="Light Checkbox">Light</LightCheckbox> <LightCheckbox defaultChecked={true} showBox={false}>Light</LightCheckbox>
<DarkCheckbox defaultChecked={true} showBox={false} ariaLabel="Dark Checkbox">Dark</DarkCheckbox> <DarkCheckbox defaultChecked={true} showBox={false}>Dark</DarkCheckbox>
</div> </div>
</CheckboxDisplay> </CheckboxDisplay>
</div> </div>