Radio

Radio is a control that allows the user to only choose one predefined option.

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

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