algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-15 02:33:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

[portal][ui] add error message to checkbox input

Browse Source
This commit is contained in:
Keane Chan
2022-10-24 23:00:37 +08:00
parent 471a28be8a
commit b52f15a937
1 changed files with 58 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
packages/ui/src/CheckboxInput/CheckboxInput.tsx
View File

@ -7,6 +7,7 @@ type Props = Readonly<{
defaultValue?: boolean;
description?: string;
disabled?: boolean;
errorMessage?: string;
label: string;
name?: string;
onChange?: (
@ -21,6 +22,7 @@ function CheckboxInput(
defaultValue,
description,
disabled = false,
errorMessage,
label,
name,
value,
@ -30,59 +32,67 @@ function CheckboxInput(
) {
const id = useId();
const descriptionId = useId();
const errorId = useId();
return (
<div
className={clsx(
'relative flex',
// Vertically center only when there's no description.
description == null && 'items-center',
)}>
<div className="flex h-5 items-center">
<input
ref={ref}
aria-describedby={description != null ? descriptionId : undefined}
checked={value}
className={clsx(
'h-4 w-4 rounded border-slate-300',
disabled
? 'bg-slate-100 text-slate-400'
: 'text-primary-600 focus:ring-primary-500',
)}
defaultChecked={defaultValue}
disabled={disabled}
id={id}
name={name}
type="checkbox"
onChange={
onChange != null
? (event) => {
onChange?.(event.target.checked, event);
}
: undefined
}
/>
</div>
<div className="ml-3 text-sm">
<label
className={clsx(
'block font-medium',
disabled ? 'text-slate-400' : 'text-slate-700',
)}
htmlFor={id}>
{label}
</label>
{description && (
<p
<div>
<div
className={clsx(
'relative flex',
// Vertically center only when there's no description.
description == null && 'items-center',
)}>
<div className="flex h-5 items-center">
<input
ref={ref}
aria-describedby={description != null ? descriptionId : undefined}
checked={value}
className={clsx(
'text-xs',
disabled ? 'text-slate-400' : 'text-slate-500',
'h-4 w-4 rounded border-slate-300',
disabled
? 'bg-slate-100 text-slate-400'
: 'text-primary-600 focus:ring-primary-500',
)}
id={descriptionId}>
{description}
</p>
)}
defaultChecked={defaultValue}
disabled={disabled}
id={id}
name={name}
type="checkbox"
onChange={(event) => {
if (!onChange) {
return;
}
onChange(event.target.checked, event);
}}
/>
</div>
<div className="ml-3 text-sm">
<label
className={clsx(
'block font-medium',
disabled ? 'text-slate-400' : 'text-slate-700',
)}
htmlFor={id}>
{label}
</label>
{description && (
<p
className={clsx(
'text-xs',
disabled ? 'text-slate-400' : 'text-slate-500',
)}
id={descriptionId}>
{description}
</p>
)}
</div>
</div>
{errorMessage && (
<p className="text-danger-600 mt-2 text-sm" id={errorId}>
{errorMessage}
</p>
)}
</div>
);
}