mary.my.id
handy online tools for AT Protocol
boat.kelinci.net
atproto
bluesky
atcute
typescript
solidjs
feat: allow disabling radio options
+4
-4
src/components/inputs/radio-input.tsx
+4
-4
src/components/inputs/radio-input.tsx
···
10
name?: string;
11
required?: boolean;
12
value?: T;
13
-
options: { value: NoInfer<T>; label: string }[];
14
onChange?: (next: NoInfer<T>, event: BoundInputEvent<HTMLInputElement>) => void;
15
}
16
···
26
<span class="font-semibold text-gray-600">{props.label}</span>
27
</legend>
28
29
-
{props.options.map(({ value, label }, idx) => {
30
const optionId = fieldId + idx;
31
32
return (
33
-
<span class="flex items-center gap-3">
34
<input
35
type="radio"
36
id={optionId}
···
45
<label for={optionId} class="text-sm">
46
{label}
47
</label>
48
-
</span>
49
);
50
})}
51
···
10
name?: string;
11
required?: boolean;
12
value?: T;
13
+
options: { value: NoInfer<T>; label: string; disabled?: boolean }[];
14
onChange?: (next: NoInfer<T>, event: BoundInputEvent<HTMLInputElement>) => void;
15
}
16
···
26
<span class="font-semibold text-gray-600">{props.label}</span>
27
</legend>
28
29
+
{props.options.map(({ value, label, disabled }, idx) => {
30
const optionId = fieldId + idx;
31
32
return (
33
+
<fieldset disabled={disabled} class="flex items-center gap-3 disabled:opacity-50">
34
<input
35
type="radio"
36
id={optionId}
···
45
<label for={optionId} class="text-sm">
46
{label}
47
</label>
48
+
</fieldset>
49
);
50
})}
51