Checkbox

Checkbox is used for a list of selections that are meant to have one or more options checked.

See this kit in action in our sample UI

Default


  PBCheckbox(checked: false, text: "Unchecked", action: {})
    .padding(.bottom, Spacing.small)

  PBCheckbox(checked: true, text: "Checked", action: {})

Default w/ Error


PBCheckbox(
  checked: false,
  checkboxType: .error,
  text: "Error",
  action: {}
)

Indeterminate Checkbox


PBCheckbox(
  checked: true,
  checkboxType: .indeterminate,
  text: "Indeterminate",
  action: {}
)

Props

Name	Type	Description	Default	Values
Checked	`Bool`	Adds a check to the Checkbox	`false`	`true` `false`
Checkbox Type	`CheckboxType`	Changes the style of the Checkbox	`default`	`default` `error` `indeterminate`
Text	`String`	Adds a text label	`nil`
Action	`(() -> Void)`	Adds an action	`{}`

UI Samples using Checkbox Kit

Get the full picture. See how this kit is used in our samples.

Conference Statistics

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat