Skip to main contenteBay Playbook

Input overview

Input fields allow users to enter and submit data. Choose the type that matches the shape and structure of what the user needs to provide.

Considerations

Intentional

Every input should collect only the information needed for the task. Avoid asking for data you won’t use.

Guided

Use labels, helper text, and the right input type to set expectations before the user acts. Validation should confirm success as much as it flags failure.

Consistent

Maintain the same field size, label position, and spacing throughout a form. Mixed patterns create uncertainty and slow users down.

Input types

Choose the input that fits what the user needs to provide. Specialized types reduce formatting errors and speed up entry.

A checkbox with a label of ‘free shipping’.

Checkbox

Checkboxes allow the user to select multiple options from a list or a single yes/no option. Learn more about using checkbox.

An empty combobox with a popover list sits to the left of a combobox with characters entered and a popover list related to the characters.

Combobox

The combobox combines a text field with a popover menu, allowing users to filter and choose an option from a list or enter their own value. Learn more about using combobox.

‘Dec 1–31, 2024’ value is shown in the date picker field.

Date field

Date picker fields allow users to open a calendar and select a single date or a date range. Learn more about using date field.

A ‘Color’ label sits above a dropdown. The dropdown has the following options listed, “walnut”, “maple”, “cherry” and “ash”. “Walnut” is selected”.

Dropdown

Dropdown fields allow for selection of a value within a predetermined dataset. Learn more about using dropdown.

A numeric stepper with the label “Quantity” placed inside the container, aligned to the left. The component includes a minus button, the current value “2,” and a plus button on the right.

Numeric stepper

A numeric stepper is a control for editing a numeric value with buttons to decrease or increase the value. Learn more about using numeric stepper.

A password field with hidden values.

Password

The password field lets users enter a password with characters concealed and a toggle to reveal them. Learn more about using password.

A full phone number ‘+1 (234) 567-8900’ is shown in the phone number field.

Phone number

The phone number field is a specialized text field enabling quick phone number entry. Learn more about using phone number.

‘Choose a payment method’ section groups two radio buttons: Credit card and Paypal. The Credit card radio button is unselected, while the Paypal button is selected.

Radio button

Radio buttons allow the user to select one option from a set. Learn more about using radio button.

A select list with a ‘Date range’ label.

Select list

Select list allows users to choose a single option from a predefined list. It uses the browser's native dropdown and is available on web only. Learn more about select list.

‘Facial ID sign in’ selected switch

Switch

Switches allow users to toggle a setting on or off. Learn more about using switch.

Helper text is below the text area and reads “Please share additional information or suggestions”.

Text area

Text areas allow for input that extends across multiple lines. Learn more about using text area.

A text field with a value of “Katherine”.

Text field

Text fields let users enter and submit text. Learn more about using text field.

Choosing the right input

These pairs are frequently confused. Use these guidelines to pick the right one.

Checkbox vs. radio button

Use a checkbox when:

  • The user can select zero or more options
  • A single yes/no choice needs to be confirmed
  • Each option is independent of the others

Quick check: Can the user walk away without selecting anything?

Yes — checkbox. No — radio button.

Use a radio button when:

  • Exactly one option must be selected
  • Options are mutually exclusive
  • A default can be pre-selected, but the user must actively choose

Text field vs. text area

Use a text field when:

  • The response is a single line (name, email, search term)
  • Character count is short and predictable

Use a text area when:

  • The response is expected to span multiple lines
  • The user needs space to compose (feedback, description, notes)

Dropdown vs. radio buttons

Use a dropdown when:

  • There are more than 4-5 options
  • Listing all options would clutter the layout
  • Options do not need to be directly compared

Use a radio button when:

  • There are 4 or fewer options
  • Comparing options directly helps the user decide
  • The form has enough vertical space to show them all