UI-licious Documentation

Appearance

I.select() ​

Select a checkbox, radio button, or a select dropdown option.

If the option is already selected, this does nothing.

INFO

I.select only works with standard HTML elements:

  • <input type='checkbox'>
  • <input type='radio'>
  • <select> dropdowns

If your application uses custom UI widgets that simulate checkboxes, radios, or dropdowns, use I.click() instead.

Usage ​

There are two ways to use I.select:

javascript
// select an option that is uniquely identifiable
I.select(option: string)

// select an option within a specific list
I.select(list: string, option: string)

When there are multiple lists with the same options, we recommend using I.select(list, option) to avoid ambiguity.

Parameters ​

ParameterTypeDescription
liststring(optional) The group or field to select from — by text, name attribute, CSS or XPath selector
optionstringThe option to select — by text, value, CSS or XPath selector

Examples ​

Select a checkbox ​

Here's a simple checkbox for illustration:
Demo: Simple Checkbox
UI
HTML
<!--[--><label>
  <input id="agree-checkbox" type="checkbox" name="terms"> I agree to the terms and conditions.
</label>
<!--]-->

To select the checkbox, use I.select() using the checkbox label, CSS or XPath:

js
// using checkbox label
I.select("I agree")

// using CSS
I.select("#agree-checkbox")

// using XPath
I.select("//input[name='terms']")

Select a radio button from a group ​

Here's a group of radio buttons for illustration:


	Door color

	
	
	






	Frame color
Demo: Radio Button Group
UI
Door color

Frame color
HTML
<!--[--><div>
  <b>Door color</b><br>
  <label><input type="radio" name="door-color" value="r" checked="">Red</label>
  <label><input type="radio" name="door-color" value="g">Green</label>
  <label><input type="radio" name="door-color" value="b">Blue</label>
</div>
<br>
<div>
  <b>Frame color</b><br>
  <label><input type="radio" name="frame-color" value="r" checked="">Red</label>
  <label><input type="radio" name="frame-color" value="g">Green</label>
  <label><input type="radio" name="frame-color" value="b">Blue</label>
</div>
<!--]-->

Specify the radio button group using the visible text or name attribute:

js
// by visible text
I.select("Door Color", "Red")

// by name
I.select("door-color", "Red")

Specify the option to select by label, value, CSS, or XPath selector:

js
// by label
I.select("Door Color", "Red")

// by value
I.select("Door Color", "r")

// by CSS
I.select("Door Color", "input[value='r']")

// by XPath
I.select("Door Color", "//input[@value='r']")

Select an option from a select dropdown ​

Here is a <select> dropdown for illustration:
Demo: Select Dropdowns
UI




HTML
<!--[--><label for="door-color"><b>Door color</b></label><br>
<select id="door-color" name="door-clr">
  <option value="" selected="">Select color</option>
  <option value="r">Red</option>
  <option value="g">Green</option>
  <option value="b">Blue</option>
</select>
<br>
<br>
<label for="frame-color"><b>Frame color</b></label><br>
<select id="frame-color" name="frame-clr">
  <option value="" selected="">Select color</option>
  <option value="r">Red</option>
  <option value="g">Green</option>
  <option value="b">Blue</option>
</select>
<!--]-->

Specify the dropdown list by label, name, CSS or XPath selector:

js
// using dropdown label
I.select("Door Color", "Blue")

// using dropdown name
I.select("door-clr", "Blue")

// using CSS
I.select("#door-color", "Blue")

// using XPath
I.select("//select[@name='door-clr']", "Blue")

Specify the option to select using its label, value, or CSS or XPath selector:

js
// using option label
I.select("Door Color", "Blue")

// using option value
I.select("Door Color", "b")

// using option CSS
I.select("#door-color", "option[value='b']")

// using option XPath
I.select("Door Color", "//option[@value='b']")