Select

Select displays multiple options for a user to pick from in a dropdown menu. User selects one option.

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

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