Selectors

Selectors provide a simple way to select a value from a pre-determined set.

Date Selectors

Usage

A dialog selector is used to select a single date.

Behavior

A dialog selector is used to select a single dateThe selected day is indicated by a filled square. The current day is indicated by the CMS accent color and type weight.

Start Date selector on Season page

Single Select Dropdown

Usage

A single-select allows the user to select an item among a list of choices revealed upon opening a temporary dropdown. Each item on the list is a discrete option. The none option appears at the top of the list. It also counts as one of the discrete option, and thus searchable by users.

A single-select is used when only a single item from a list can be selected. The list is a controlled list which can be of any length.

Behavior

The dropdown should be emitted at the bottom of the Select field. If the height of the sheet prevents all items from being displayed, it can scroll internally. If the list contains 10 or more text items, including the none option, the user should be able to enter a keyword, which functions as a filter. The list displayed after every new keyboard input should refresh to only contain the text items that have the keyword as part of them, presented in alphabetical order.

Variations

Text-Single Select Dropdown

The interface and interaction for a single select dropdown for text is exactly as stated above

Select 1 text item only
Pre-determined, controlled list
Autocomplete search becomes available when the list has 7 or more items

Use cases: Series>Rating, Series>Related Series, Series>Status

Toggle on TV episode

Created Content-Single Select Dropdown

The interface and interaction for a single-select dropdown for created content is exactly the same as the single-select for text, except the dropdown searches over the titles of non-text items such as Content or Metadata types. This pattern is appropriate for a list of non-text items consisted of one single type (e.g. Person).

Select 1 text item only (Content or Metadata)
Pre-determined, controlled list
Always searchable

Use cases: Season>Cast>Person

Toggle on TV episode

Created Content-Single Select Dropdown w/Autocomplete

A single-item autocomplete for created content list is very similar to the single-item dropdown for text, in that user can only select one item from a controlled list that is fetched from the server. This single-item w/autocomplete searches over multiple types of items depending on the use case. Since multiple types can exist within the list, extra information of type (e.g. Series, Episode, Gallery, etc.) can be displayed in addition to the title. Due to this feature, this pattern is the most appropriate for searching over the list consisted of multiple types. User’s query only searches over the title of the items.

Select 1 text item (Content or Metadata)
Pre-determined, controlled list
User can add the next row for more selection via + button; the same item can be added in this new row
Once selected, the item can be removed by x button: Refer to Add and Remove button for more details on the x button
Always searchable

Use cases: Series > Collection, Collection > Item, Collection Group > Collection

Toggle on TV episode

Multi Select Dropdown

Usage

Multi select lists are best suited to presenting a homogeneous data type or sets of data types. They are optimized for a selection of one or more text that belong to a certain category. Each tile can be selected only once. All selected tiles are denoted by the corresponding rows highlighted, and their text entries are displayed in the text field in token boxes. The selected items displayed in the tokens should appear in the order of the list, not the selection. Selected items can be unselected by either clicking on the x icon on a token or clicking on the highlighted item on the list.

The content of a multi-select list should be limited to a single-line text. The content is a controlled list.

Behavior

A multi select present multiple items vertically as a single continuous element. It allows multiple selections from the list and offers autocompletion upon entering a keyword when the list contains 10 or more text items

Variations

Text-Multi Select dropdown

The interface and interaction for a Multi select dropdown for text is exactly as stated above

Select multiple text items
No duplicate item selection; an item can be selected only once
Pre-determined, controlled list
autocomplete search becomes available when the list has 10 or more items

Use cases: Series>Categories, Series>Genre

Toggle on TV episode

Text-Multi Select w/Autocomplete and Create New

The interface and interaction for a multi-select w/autocomplete and create new is exactly the same with the multi-select for text, except User can create a new item. Unlike the multi-select where user can only select from the pre-determined list, user can create a new item and add that to the list in multi-item autocomplete list.

Select multiple text items
No duplicate item selection; an item can be selected only once
User can create new items
This type of lists are always searchable

Use cases: Tags

Tags field on the Association Card

Created Content-Multi Select w/Autocomplete Without Create New

A multi-item autocomplete WITHOUT create new feature behaves exactly the same way as multi-item autocomplete WITH create new feature, except that the user cannot create new item. This pattern is appropriate for the Content or Metadata types that cannot be simply created on the fly.

Select multiple items (Content, Metadata)
No duplicate item selection; an item can be selected only once
Pre-determined, controlled list
This type of lists are always searchable

Use cases: Season > Cast > Role(s)

Toggle on TV episode