How can I change the value of a checkbox in Webflow to display the label name instead of True?
TL;DR
- Set a custom value for the checkbox by replacing "True" with your desired label text in the Element Settings panel.
- For CMS checkboxes, use conditional visibility to show a text block with your label only when the checkbox is checked.
To make a checkbox in Webflow display the label name instead of "True" (typically when using CMS or forms), you’ll need to change how the value is assigned and displayed.
1. Understand Default Checkbox Behavior
- In Webflow forms, checkbox fields submit a value of “True” when checked.
- This value is not automatically linked to the checkbox's label text.
2. Set a Custom Value for the Checkbox
- Select the checkbox element (not the label).
- In the Element Settings panel, locate the “Value” attribute under “Form Block Settings.”
- Replace the default “True” with your desired label text (e.g., “Subscribe to Newsletter”).
3. Match the Label to the Desired Display Value
- The Value you enter is what gets submitted or shown in CMS-connected elements.
- Make sure it matches the visible label text or whatever you want displayed instead of “True.”
4. Display the Checked Value in CMS Collection Lists
- When using checkbox fields in a CMS Collection, Webflow treats them as true/false booleans.
- You cannot directly replace “True” in dynamic text with the label inside the Webflow UI.
- Workaround:
- Use a Conditional Visibility block.
- Add a Text Block inside the Collection List and set it to only show if the checkbox field is checked.
- Manually type the label text (e.g., “Yes” or “Premium Member”) in the Text Block.
Summary
To replace “True” with a label name in Webflow checkboxes, set a custom value in the checkbox field and, for CMS-driven elements, use conditional visibility to display label text based on the checked state.