HTML / CSS / JavaScript

Basic Controls and Selectors

Buttons, selectors, switches, sliders, and combined input controls.

78category cases
Currently showing 78 examples
0001Basic Controls and Selectors

CSS gradient buttons

A set of modern gradient buttons with glow, outlines, and press feedback.

HTMLCSSButtonGradient
Open and run
0021Basic Controls and Selectors

Meeting Room Segmented Control

Complete a segmented control in a meeting room scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsSegmented SelectorHTMLCSSJavaScript
Open and run
0037Basic Controls and Selectors

Meeting room preference toggle matrix

Complete the preference toggle matrix in a meeting room scenario: includes realistic content, actionable controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsPreference Toggle MatrixHTMLCSSJavaScript
Open and run
0053Basic Controls and Selectors

Meeting room range adjuster

Complete a range adjuster in a meeting-room scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Basic Controls and SelectorsRange SliderHTMLCSSJavaScript
Open and run
0069Basic Controls and Selectors

Meeting Room Rating Scale

Complete a rating scale for a meeting room scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.

Basic Controls and SelectorsRating scaleHTMLCSSJavaScript
Open and run
0085Basic Controls and Selectors

Meeting Room Filter Chips

Complete the filter chip group in a meeting-room scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Basic Controls and SelectorsFilter Tag GroupHTMLCSSJavaScript
Open and run
0101Basic Controls and Selectors

Meeting Room Numeric Stepper

Complete a numeric stepper in a meeting room scenario: include realistic content, actionable controls, clear status feedback, and cross-size layouts.

Basic Controls and SelectorsNumeric StepperHTMLCSSJavaScript
Open and run
0117Basic Controls and Selectors

Meeting Room Color Swatch Selection

Complete a color swatch selection in a meeting room scenario: includes real content, actionable controls, clear state feedback, and cross-size layouts.

Basic Controls and SelectorsColor Sample SelectionHTMLCSSJavaScript
Open and run
0133Basic Controls and Selectors

Meeting Room Plan Card Selection

Complete the option card selection for a meeting room scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Basic Controls and SelectorsSolution card selectionHTMLCSSJavaScript
Open and run
0149Basic Controls and Selectors

Meeting Room Dual-Value Range Control

Complete dual-range control in a meeting-room scenario: includes realistic content, actionable controls, clear state feedback, and cross-size layouts.

Basic Controls and SelectorsDual-range controlHTMLCSSJavaScript
Open and run
0165Basic Controls and Selectors

Quick date selection for meeting rooms

Complete quick date selection in a meeting room scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Basic Controls and SelectorsDate Quick SelectHTMLCSSJavaScript
Open and run
0181Basic Controls and Selectors

Reading Mode Segmented Picker

Complete a segmented control for the reading mode scenario: include real content, interactive controls, clear state feedback, and a responsive layout across sizes.

Basic Controls and SelectorsSegmented SelectorHTMLCSSJavaScript
Open and run
0197Basic Controls and Selectors

Reading Mode Preference Toggle Matrix

Complete the preference toggle matrix in the reading mode scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.

Basic Controls and SelectorsPreference Toggle MatrixHTMLCSSJavaScript
Open and run
0213Basic Controls and Selectors

Reading Mode Range Slider

Complete the range adjuster in the reading mode scenario: includes real content, interactive controls, clear status feedback, and layouts across sizes.

Basic Controls and SelectorsRange SliderHTMLCSSJavaScript
Open and run
0229Basic Controls and Selectors

Rating scale for reading mode

Complete the rating scale in the reading mode scenario: includes real content, operable controls, clear status feedback, and responsive layouts.

Basic Controls and SelectorsRating scaleHTMLCSSJavaScript
Open and run
0245Basic Controls and Selectors

Reading mode filter chip group

Complete a filter chip group in a reading mode scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.

Basic Controls and SelectorsFilter Tag GroupHTMLCSSJavaScript
Open and run
0261Basic Controls and Selectors

Reading mode numeric stepper

Complete a numeric stepper for a reading-mode scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Basic Controls and SelectorsNumeric StepperHTMLCSSJavaScript
Open and run
0277Basic Controls and Selectors

Reading Mode Color Swatches Selection

Finish selecting color swatches in a reading-mode scenario: real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsColor Sample SelectionHTMLCSSJavaScript
Open and run
0293Basic Controls and Selectors

Reading Mode Scheme Card Selection

Complete the card selection in a reading-mode scenario, with real content, interactive controls, clear status feedback, and responsive layouts.

Basic Controls and SelectorsSolution card selectionHTMLCSSJavaScript
Open and run
0309Basic Controls and Selectors

Reading Mode Dual Range Control

Complete a dual-value range control in a reading-mode scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.

Basic Controls and SelectorsDual-range controlHTMLCSSJavaScript
Open and run
0325Basic Controls and Selectors

Quick date selection for reading mode

Complete quick date selection for a reading mode scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Basic Controls and SelectorsDate Quick SelectHTMLCSSJavaScript
Open and run
0341Basic Controls and Selectors

Travel Plan Segmented Selector

Complete the segmented selector in a travel planning scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsSegmented SelectorHTMLCSSJavaScript
Open and run
0356Basic Controls and Selectors

Travel Plan Preference Toggle Matrix

Complete the preference toggle matrix for a travel planning scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Basic Controls and SelectorsPreference Toggle MatrixHTMLCSSJavaScript
Open and run
0371Basic Controls and Selectors

Travel plan range mixer

Complete a range mixer for a travel planning scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsRange SliderHTMLCSSJavaScript
Open and run
0386Basic Controls and Selectors

Travel Plan Rating Scale

Complete the rating scale in a travel-planning scenario: real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsRating scaleHTMLCSSJavaScript
Open and run
0401Basic Controls and Selectors

Travel Plan Filter Chips

Complete a filter chip group for a travel plan scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsFilter Tag GroupHTMLCSSJavaScript
Open and run
0414Basic Controls and Selectors

Travel Plan Numeric Stepper

Complete a numeric stepper for a travel plan scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsNumeric StepperHTMLCSSJavaScript
Open and run
0427Basic Controls and Selectors

Travel Plan Color Swatch Selection

Complete color swatch selection in a travel planning scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.

Basic Controls and SelectorsColor Sample SelectionHTMLCSSJavaScript
Open and run
0440Basic Controls and Selectors

Travel Plan Option Cards Selection

Complete the option card selection for a travel plan scenario: includes real content, actionable controls, clear status feedback, and responsive layout across screen sizes.

Basic Controls and SelectorsSolution card selectionHTMLCSSJavaScript
Open and run
0453Basic Controls and Selectors

Travel plan dual-value range control

Complete the dual-value range control in the travel planning scenario: includes realistic content, actionable controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsDual-range controlHTMLCSSJavaScript
Open and run
0463Basic Controls and Selectors

Quick Date Picker for Travel Plans

Complete quick date selection in a travel planning scenario: includes real content, actionable controls, clear state feedback, and cross-size layouts.

Basic Controls and SelectorsDate Quick SelectHTMLCSSJavaScript
Open and run
0473Basic Controls and Selectors

Music Studio Segmented Selector

Complete the segmented choice control in the music studio scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsSegmented SelectorHTMLCSSJavaScript
Open and run
0481Basic Controls and Selectors

Music Studio Preference Toggle Matrix

Complete a preference toggle matrix for a music studio scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Basic Controls and SelectorsPreference Toggle MatrixHTMLCSSJavaScript
Open and run
0489Basic Controls and Selectors

Music Studio Range Mixer

Complete a range control in a music studio scene: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsRange SliderHTMLCSSJavaScript
Open and run
0494Basic Controls and Selectors

Music Studio Rating Scale

Complete the rating scale in a music studio scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

Basic Controls and SelectorsRating scaleHTMLCSSJavaScript
Open and run
0521Basic Controls and Selectors

Smart Home Quick Date Picker

Complete fast date selection in a smart home scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts.

Basic Controls and SelectorsDate Quick SelectHTMLCSSJavaScript
Open and run
0522Basic Controls and Selectors

Bike Shed Color Swatch Selector

Complete color swatch selection in a bike shed scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsColor Sample SelectionHTMLCSSJavaScript
Open and run
0538Basic Controls and Selectors

Community Garden Dual Range Control

Complete a dual-range control in a community garden scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts.

Basic Controls and SelectorsDual-range controlHTMLCSSJavaScript
Open and run
0547Basic Controls and Selectors

Family Kitchen Filter Chip Group

Complete a filter tag set in a family kitchen scenario: includes real content, interactive controls, clear state feedback, and a responsive layout across sizes.

Basic Controls and SelectorsFilter Tag GroupHTMLCSSJavaScript
Open and run
0563Basic Controls and Selectors

Fitness Corner numeric stepper

Complete a numeric stepper for a fitness corner scenario: include real content, interactive controls, clear state feedback, and a responsive layout across sizes.

Basic Controls and SelectorsNumeric StepperHTMLCSSJavaScript
Open and run
0572Basic Controls and Selectors

Gardening Workshop Option Card Selection

Complete a solution card selection in a garden workshop scenario: include real content, interactive controls, clear status feedback, and a responsive layout.

Basic Controls and SelectorsSolution card selectionHTMLCSSJavaScript
Open and run
0588Basic Controls and Selectors

Greenhouse Check-in Desk Quick Date Selection

Complete quick date selection in a greenhouse check-in desk scenario: includes realistic content, actionable controls, clear status feedback, and responsive layout across sizes.

Basic Controls and SelectorsDate Quick SelectHTMLCSSJavaScript
Open and run
0597Basic Controls and Selectors

Greenhouse Control Console Color Swatch Selection

Complete the color swatch selection in a greenhouse control console scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Basic Controls and SelectorsColor Sample SelectionHTMLCSSJavaScript
Open and run
0613Basic Controls and Selectors

Greenhouse Demo Screen Dual Range Control

Complete the dual-range control for a greenhouse demo screen scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Basic Controls and SelectorsDual-range controlHTMLCSSJavaScript
Open and run
0622Basic Controls and Selectors

Greenhouse display rack filter chip group

Complete the filter tag group in a greenhouse display-rack scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.

Basic Controls and SelectorsFilter Tag GroupHTMLCSSJavaScript
Open and run
0638Basic Controls and Selectors

Greenhouse Lounge Numeric Stepper

Complete the numeric stepper in a greenhouse lounge setting: includes real content, interactive controls, clear state feedback, and a cross-size layout.

Basic Controls and SelectorsNumeric StepperHTMLCSSJavaScript
Open and run
0647Basic Controls and Selectors

Greenhouse Plan Board Option Cards Selection

Complete plan card selection for a greenhouse plan board scenario: include realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsSolution card selectionHTMLCSSJavaScript
Open and run
0663Basic Controls and Selectors

Greenhouse Setup Cart Range Adjuster

Complete a range slider in a greenhouse setup cart scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsRange SliderHTMLCSSJavaScript
Open and run
0672Basic Controls and Selectors

Greenhouse Task Shelf Rating Scale

Complete the rating scale in a greenhouse task shelf scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsRating scaleHTMLCSSJavaScript
Open and run
0688Basic Controls and Selectors

Guest suite segmented selector

Complete a segmented selector in a guest-suite scenario: real content, actionable controls, clear state feedback, and layouts across sizes.

Basic Controls and SelectorsSegmented SelectorHTMLCSSJavaScript
Open and run
0697Basic Controls and Selectors

Children’s Room Preference Switch Matrix

Complete a preference toggle matrix in the children’s room scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.

Basic Controls and SelectorsPreference Toggle MatrixHTMLCSSJavaScript
Open and run
0713Basic Controls and Selectors

Loft Check-in Desk Date Quick Select

Complete a quick date picker in a loft check-in desk scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Basic Controls and SelectorsDate Quick SelectHTMLCSSJavaScript
Open and run
0722Basic Controls and Selectors

Loft Control Deck Color Swatches

Complete color swatch selection in the loft control console scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsColor Sample SelectionHTMLCSSJavaScript
Open and run
0738Basic Controls and Selectors

Loft Demo Screen Dual-Range Control

Complete the dual-range control in the loft demo screen scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.

Basic Controls and SelectorsDual-range controlHTMLCSSJavaScript
Open and run
0747Basic Controls and Selectors

Loft Display Rack Filter Tag Group

Complete the filter tag group in the loft display rack scenario: include real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsFilter Tag GroupHTMLCSSJavaScript
Open and run
0763Basic Controls and Selectors

Loft lounge numeric stepper

Complete the numeric stepper in the loft lounge scene: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.

Basic Controls and SelectorsNumeric StepperHTMLCSSJavaScript
Open and run
0772Basic Controls and Selectors

Loft plan board option card selection

Complete option card selection in a loft plan board scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.

Basic Controls and SelectorsSolution card selectionHTMLCSSJavaScript
Open and run
0788Basic Controls and Selectors

Loft configuration cart range adjuster

Complete the range adjuster in the loft setup cart scenario: includes real content, actionable controls, clear state feedback, and responsive layout across sizes.

Basic Controls and SelectorsRange SliderHTMLCSSJavaScript
Open and run
0797Basic Controls and Selectors

Loft Task Shelf Rating Scale

Complete a rating scale flow for the loft task shelf scenario: includes realistic content, actionable controls, clear state feedback, and layouts that adapt across sizes.

Basic Controls and SelectorsRating scaleHTMLCSSJavaScript
Open and run
0813Basic Controls and Selectors

Creative Lab Segmented Selector

Complete the segmented control in the Creative Lab scenario: include real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsSegmented SelectorHTMLCSSJavaScript
Open and run
0822Basic Controls and Selectors

Maker Space preference toggle matrix

Complete a preference toggle matrix in a makerspace scenario: include real content, interactive controls, clear state feedback, and a responsive layout across sizes.

Basic Controls and SelectorsPreference Toggle MatrixHTMLCSSJavaScript
Open and run
0838Basic Controls and Selectors

Cafeteria Check-in Desk Date Quick Select

Complete rapid date selection in a pantry check-in desk scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsDate Quick SelectHTMLCSSJavaScript
Open and run
0847Basic Controls and Selectors

Pantry Control Console Color Swatches Selection

Create color swatch selection for pantry control console scenarios: includes real content, interactive controls, clear state feedback, and layouts that adapt across sizes.

Basic Controls and SelectorsColor Sample SelectionHTMLCSSJavaScript
Open and run
0863Basic Controls and Selectors

Pantry demo screen dual-range control

Complete the dual-value range control in a pantry demo screen scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Basic Controls and SelectorsDual-range controlHTMLCSSJavaScript
Open and run
0872Basic Controls and Selectors

Pantry Display Rack Filter Tag Group

Complete the filter chips in a pantry display-rack scenario: include real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsFilter Tag GroupHTMLCSSJavaScript
Open and run
0888Basic Controls and Selectors

Pantry lounge numeric stepper

Complete a numeric stepper in a pantry lounge scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsNumeric StepperHTMLCSSJavaScript
Open and run
0897Basic Controls and Selectors

Pantry Plan Board Option Cards Selection

Complete card selection in a pantry plan board scenario: include realistic content, actionable controls, clear status feedback, and responsive layouts.

Basic Controls and SelectorsSolution card selectionHTMLCSSJavaScript
Open and run
0913Basic Controls and Selectors

Range adjuster for pantry cart configuration

Complete a range adjuster in a pantry setup cart scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Basic Controls and SelectorsRange SliderHTMLCSSJavaScript
Open and run
0922Basic Controls and Selectors

Pantry task rack rating scale

Complete a rating scale in a pantry-task shelf scenario: real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsRating scaleHTMLCSSJavaScript
Open and run
0938Basic Controls and Selectors

Pet Corner segmented selector

Complete the segmented control in a pet corner scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Basic Controls and SelectorsSegmented SelectorHTMLCSSJavaScript
Open and run
0947Basic Controls and Selectors

Podcast Booth Preference Toggle Matrix

Complete a preference toggle matrix in a podcast recording booth scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsPreference Toggle MatrixHTMLCSSJavaScript
Open and run
0963Basic Controls and Selectors

Quick Date Picker for Reading Club

Quick date selection in a book club scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout.

Basic Controls and SelectorsDate Quick SelectHTMLCSSJavaScript
Open and run
0972Basic Controls and Selectors

Performance Check-in Desk Color Swatches Selection

Complete color sample selection in a recital check-in desk scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsColor Sample SelectionHTMLCSSJavaScript
Open and run
0988Basic Controls and Selectors

Stage Control Room Dual-Value Range Control

Complete dual-value range control in the performance control console scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsDual-range controlHTMLCSSJavaScript
Open and run
0997Basic Controls and Selectors

Performance Demo Screen Filter Tag Group

Complete the filter chip group for the performance demo screen scenario: include real content, interactive controls, clear status feedback, and a responsive layout across sizes.

Basic Controls and SelectorsFilter Tag GroupHTMLCSSJavaScript
Open and run
1013Basic Controls and Selectors

Performance Display Rack Numeric Stepper

Complete a numeric stepper in a performance display rack scenario: with real content, actionable controls, clear state feedback, and a responsive layout across sizes.

Basic Controls and SelectorsNumeric StepperHTMLCSSJavaScript
Open and run
1022Basic Controls and Selectors

Performance Lounge Option Card Selection

Complete the plan card selection in the performance break area scenario: include real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsSolution card selectionHTMLCSSJavaScript
Open and run
1038Basic Controls and Selectors

Performance Plan Board Range Control

Complete the range control in a performance planning board scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Basic Controls and SelectorsRange SliderHTMLCSSJavaScript
Open and run