Skip to content

Commit b0cfdcf

Browse files
committed
fix: improve checkbox parameter display by using consistent label and custom label from styling
- Always show parameter label at the top for all parameter types - Add support for custom checkbox label text via styling.label property - Default checkbox label to \Enable\ for better UX Fixes #25
1 parent aacb11d commit b0cfdcf

1 file changed

Lines changed: 27 additions & 13 deletions

File tree

site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -274,20 +274,34 @@ const ParameterField: FC<ParameterFieldProps> = ({
274274
);
275275

276276
case "checkbox":
277+
const hasDescription = parameter.description && parameter.description !== "";
278+
// Check for custom label in styling property
279+
const customLabel = (parameter.styling as { label?: string })?.label;
280+
277281
return (
278-
<div className="flex items-center space-x-2">
279-
<Checkbox
280-
id={parameter.name}
281-
checked={value === "true"}
282-
defaultChecked={defaultValue === "true"} // TODO: defaultChecked is always overridden by checked
283-
onCheckedChange={(checked) => {
284-
onChange(checked ? "true" : "false");
285-
}}
286-
disabled={disabled}
287-
/>
288-
<Label htmlFor={parameter.name}>
289-
{parameter.display_name || parameter.name}
290-
</Label>
282+
<div className="flex flex-col gap-1">
283+
<div className="flex items-center space-x-2">
284+
<Checkbox
285+
id={parameter.name}
286+
checked={value === "true"}
287+
defaultChecked={defaultValue === "true"} // TODO: defaultChecked is always overridden by checked
288+
onCheckedChange={(checked) => {
289+
onChange(checked ? "true" : "false");
290+
}}
291+
disabled={disabled}
292+
/>
293+
<Label htmlFor={parameter.name} className="flex gap-2 flex-wrap">
294+
{customLabel || "Enable"}
295+
</Label>
296+
</div>
297+
298+
{hasDescription && (
299+
<div className="text-content-secondary ml-7">
300+
<MemoizedMarkdown className="text-xs">
301+
{parameter.description}
302+
</MemoizedMarkdown>
303+
</div>
304+
)}
291305
</div>
292306
);
293307

0 commit comments

Comments
 (0)