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.

Supported Elements

I.select works with standard HTML form controls:

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

For custom-styled checkboxes and radio buttons where the native <input> is visually hidden, I.select still works—provided you target the visible label. If your application uses purely custom <div> or <span> widgets without an underlying <input>, 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

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

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

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

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

Hidden or custom-styled checkboxes ​

Many modern web frameworks (such as Tailwind, Bootstrap, or custom component libraries) visually hide the native <input type="checkbox"> (using opacity: 0, display: none, or offscreen positioning) and display a custom toggle switch or styled control alongside an associated <label>:
Demo: Custom Toggle Switch with Hidden Checkbox
UI
HTML

When interacting with hidden checkboxes:

  • Target the visible label text (Recommended): I.select("Subscribe to newsletter") works because UI-licious automatically detects the visible <label> paired with the <input> and clicks the label.
  • Do not target the hidden input directly: I.select("#newsletter") fails because hidden DOM elements cannot receive click interactions.
js
// ✅ WORKS: Targets the visible label
I.select("Subscribe to newsletter")

// ❌ FAILS: Cannot click on a hidden input directly
I.select("#newsletter")

Why use I.select() over I.click() for checkboxes?

If the checkbox or radio button is already selected, I.select() does nothing. In contrast, I.click() unconditionally toggles the element, which can accidentally uncheck an already-selected option. Use I.select() whenever your goal is to ensure selection.

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
HTML

When multiple groups share the same option labels, specify both the group (by label or name) and the option (by label or value):

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

// by group name attribute and option label
I.select("door-color", "Red")

// by group label and option value
I.select("Door Color", "r")

If the option label is unique on the page, you can select it directly with a single argument:

js
I.select("Red")

Select an option from a dropdown ​

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

Target the dropdown by label, name, or CSS selector, and specify the option by label or value:

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

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

// using dropdown label and option value attribute
I.select("Door Color", "b")

// using dropdown CSS selector and option label
I.select("#door-color", "Blue")

If the dropdown option text is unique across the page, you can select it directly with a single argument:

js
I.select("Blue")
CommandDescription
I.deselect()Uncheck an already checked checkbox
I.selected()Assert that an option, checkbox, or radio button is selected
I.deselected()Assert that an option, checkbox, or radio button is NOT selected

See Also ​