Form Selection

Select

Default

let defaultOptions = [
    (value: "1", text: "Burgers"),
    (value: "2", text: "Pizza"),
    (value: "3", text: "Tacos")
  ]
@State private var defaultState = ""

 PBSelect(title: "Favorite Food", options: defaultOptions, style: .default) { selected in
            defaultState = selected
          }

Error

let defaultOptions = [
    (value: "1", text: "Burgers"),
    (value: "2", text: "Pizza"),
    (value: "3", text: "Tacos")
  ]
@State private var errorState = ""

 PBSelect(
            title: "Favorite Food",
            options: defaultOptions,
            style: .error("Please make a valid selection")
          ) { selected in
            errorState = selected
          }

Props

Name	Type	Description	Default	Values
title	`String`	Sets label title for dropdown
options	`(String, String)`	Displays the list of dropdown options
style	`Variant`	Options for the state of dropdown	`.default`	`default` `disabled` `error`
selectedOption	`String`	Changes selected value when new value is selected
selected	`String`	Changes the value of the option selected in dropdown

Radio

Default

VStack(alignment: .leading) {
  PBRadio(
    items: [
      PBRadioItem("Power"),
      .init("Nitro"),
      .init("Google")
    ],
    orientation: .vertical,
    selected: $selectedDefault
  )
}

Custom

VStack(alignment: .leading) {
  if let selectedCustom = selectedCustom {
    Text("Your choice is: \(selectedCustom.title)")
  }
  PBRadio(
    items: [
      PBRadioItem("Custom Power"),
      .init("Custom Nitro"),
      .init("Custom Google")
    ],
    orientation: .vertical,
    selected: $selectedCustom
  )
}

With Error

VStack(alignment: .leading) {
  PBRadio(
    items: [
      PBRadioItem("Power")
    ],
    orientation: .vertical,
    selected: $selectedError,
    errorState: true
  )
}

Orientation

VStack(alignment: .leading) {
  PBRadio(
    items: [
      PBRadioItem("Power"),
      .init("Nitro"),
      .init("Google")
    ],
    orientation: .horizontal,
    selected: $selectedOrientation
  )
}

Alignment

VStack(alignment: .leading) {
  PBRadio(
    items: [
      PBRadioItem("Power"),
      .init("Nitro"),
      .init("Google")
    ],
    orientation: .horizontal,
    textAlignment: .vertical,
    selected: $selectedAlignment
  )
}

Spacing

HStack(alignment: .top) {
  PBRadio(
    items: [
      PBRadioItem("Small"),
      .init("Small Spacing"),
      .init("Small Power")
    ],
    orientation: .vertical,
    spacing: Spacing.small,
    selected: $selectedSpacing
  )
  PBRadio(
    items: [
      PBRadioItem("Medium"),
      .init("Medium Spacing"),
      .init("Medium Power")
    ],
    orientation: .vertical,
    spacing: Spacing.medium,
    selected: $selectedSpacing
  )
  PBRadio(
    items: [
      PBRadioItem("Large"),
      .init("Large Spacing"),
      .init("Large Power")
    ],
    orientation: .vertical,
    spacing: Spacing.large,
    selected: $selectedSpacing
  )
}

Padding

VStack(alignment: .leading) {
  PBRadio(
    items: [
      PBRadioItem("Small")
    ],
    orientation: .vertical,
    padding: Spacing.small,
    selected: $selectedPadding
  )
  PBRadio(
    items: [
      PBRadioItem("Medium")
    ],
    orientation: .vertical,
    padding: Spacing.medium,
    selected: $selectedPadding
  )
  PBRadio(
    items: [
      PBRadioItem("Large")
    ],
    orientation: .vertical,
    padding: Spacing.large,
    selected: $selectedPadding
  )
}

Subtitle

VStack(alignment: .leading) {
  PBRadio(
    items: [
      PBRadioItem("Power", subtitle: "subtitle")
    ],
    selected: $selectedSubtitle
  )
}

Props

Name	Type	Description	Default	Values
items	`PBRadioItem`	Specifies the value of the Radio buttons
orientation	`Orientation`	Changes between stacked or inline Radio items	`.vertical`
textAlignment	`Orientation`	Changes lable position	`.horizontal`
spacing	`CGFloat`	Applies padding around Radio and lable	`Spacing.xSmall`	`Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge`
padding	`CGFloat`	Applies padding between Radio and lable	`Spacing.xSmall`	`Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge`
errorState	`Bool`	Changes Radio to error styling
selected	`PBRadioItem?`	Sets selected Radio item

Checkbox

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	`{}`

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