Checkbox
A checkbox component with six selectable variants: Default, With Description, Disabled, Invalid, Group, and Table (row selection with select-all). Inspired by the shadcn/ui Checkbox component. Pick a variant on the Settings tab; the preview and copyable YAML update together.
How to Use
- On the Settings tab, pick a Variant (Default, With Description, Disabled, Invalid, Group, or Table). The Preview tab and the copyable YAML both update to match. Only the fields relevant to the selected variant affect the copied YAML; the others are ignored until you switch to their variant.
- Paste the YAML into Power Apps Studio (Ctrl+V). Each variant is a fully self-contained GroupContainer with its own control/variable names (e.g. varCheckedDefault, colGroupChecked, colTableChecked); you can paste more than one variant onto the same screen without name collisions.
- Default: state is a single Boolean (varCheckedDefault), toggled by clicking anywhere on the row.
- With Description / Invalid: both use AutoLayout (Horizontal row containing the box + a Vertical text column) so the label and second line of text wrap and grow (AutoHeight + Stretch) instead of clipping at a fixed size. Only the checkbox box itself is clickable here (not the whole row), since a full-row overlay needs ManualLayout and would conflict with the AutoLayout flow.
- Disabled: intentionally has no hit button: it is a static, non-interactive display, shown unchecked by default (matches the shadcn/ui disabled example). To show a disabled-and-checked state instead, set imgCheckDisabled.Visible to =true.
- Group: rows come from a single templated Gallery (galCheckboxGroup) instead of duplicated controls. Add, remove, or rename items by editing the Table(...) in galCheckboxGroup.Items (each record needs a unique Id and a Label). Checked state is tracked in a collection (colGroupChecked) that stores the Ids of checked rows, starting empty (nothing checked), with no OnVisible needed. Width is fixed at 300px (change grpCheckboxGroup.Width to resize), and the gallery auto-sizes its height to however many items you give it (Self.AllItemsCount * 28; if you change TemplateSize from 28, update this multiplier to match).
- Table: rows come from a single templated Gallery (galCheckboxTableRows). Add, remove, or rename rows by editing the Table(...) in galCheckboxTableRows.Items (each record needs a unique Id and a Name). Checked state is tracked in a collection (colTableChecked) storing the Ids of checked rows. The header select-all checkbox reflects and toggles all rows dynamically by comparing CountRows(colTableChecked) against the gallery total item count; it automatically scales if you add more rows, no per-row formula edits needed. Width is fixed at 300px (change grpCheckboxTable.Width to resize).
Problem Solved
Covers the full range of shadcn/ui Checkbox use-cases (plain toggle, helper text, disabled, validation error, multi-item group, and table row-selection with select-all) as one component instead of six separate library entries, so a user picks exactly what they need and copies a clean, minimal paste.
Integration
Default/Description/Disabled/Invalid expose state as plain Boolean variable(s): read them anywhere in the app (If(varCheckedDefault, ...) etc.). Group and Table expose state as a collection (colGroupChecked / colTableChecked) containing one {Id} record per checked row: check membership with CountRows(Filter(col..., Id = N)) > 0. No OnVisible initialisation needed for any variant; every variable/collection defaults to falsy/empty automatically when blank.
YAML Code
- grpCheckboxDefault:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
Fill: =RGBA(0, 0, 0, 0)
BorderThickness: =0
DropShadow: =DropShadow.None
Height: =24
Width: =264
X: =20
Y: =20
Children:
- boxCheckboxDefault:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
Fill: =If(varCheckedDefault, RGBA(15, 23, 42, 1), RGBA(255, 255, 255, 1))
BorderColor: =RGBA(15, 23, 42, 1)
BorderThickness: =1
DropShadow: =DropShadow.None
Height: =16
Width: =16
RadiusBottomLeft: =4
RadiusBottomRight: =4
RadiusTopLeft: =4
RadiusTopRight: =4
X: =0
Y: =4
Children:
- imgCheckDefault:
Control: Image@2.2.3
Properties:
Image: |-
="data:image/svg+xml;utf8, " & EncodeUrl(Substitute("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>", "currentColor", "RGBA(255,255,255,1)"))
Visible: =varCheckedDefault
Height: =12
Width: =12
X: =2
Y: =2
- lblCheckboxDefaultLabel:
Control: Label@2.5.1
Properties:
Align: =Align.Left
VerticalAlign: =VerticalAlign.Middle
Color: =RGBA(15, 23, 42, 1)
Fill: =RGBA(0, 0, 0, 0)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Height: =24
Size: =11
Text: ="Accept terms and conditions"
Width: =240
X: =24
Y: =0
- btnCheckboxDefaultHit:
Control: Button@0.0.45
Properties:
Appearance: ='ButtonCanvas.Appearance'.Transparent
Text: =""
OnSelect: =Set(varCheckedDefault, !varCheckedDefault)
Height: =24
Width: =264
X: =0
Y: =0
Implementation
Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.
Something not pasting right? Troubleshooting guide