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