Selected choice color

Use active() to change the highlight color of an input's selected choices.

active(tag, color)

Arguments

tag	A tag element.
color	One of "red", "purple", "indigo", "blue", "cyan", "teal", "green", "yellow", "amber", "orange", "grey", "white" specifying the active color of selected choices.

See also

Other design utilities: affix(), background(), border(), display(), float(), font(), height(), padding(), scroll(), shadow(), width()

Examples

### Radiobar example

radiobarInput(
  id = "radio1",
  choices = c("Hello", "Goodnight", "Howdy")
) %>%
  width(16) %>%
  active("orange")  # <-
#> <div class="yonder-radiobar btn-group btn-group-toggle d-flex w-16 active-orange" id="radio1" data-toggle="buttons">
#>   <label class="btn btn-grey active">
#>     <input name="radio1" type="radio" value="Hello" checked autocomplete="off"/>
#>     Hello
#>   </label>
#>   <label class="btn btn-grey">
#>     <input name="radio1" type="radio" value="Goodnight" autocomplete="off"/>
#>     Goodnight
#>   </label>
#>   <label class="btn btn-grey">
#>     <input name="radio1" type="radio" value="Howdy" autocomplete="off"/>
#>     Howdy
#>   </label>
#> </div>

### Checkbox example

checkboxInput(
  id = "check1",
  choices = c("Rock", "Paper", "Scissors"),
  selected = "Rock"
) %>%
  active("teal")
#> <div class="yonder-checkbox active-teal" id="check1">
#>   <div class="custom-control custom-checkbox">
#>     <input class="custom-control-input" type="checkbox" id="checkbox-173-407" name="checkbox-173-407" value="Rock" checked autocomplete="off"/>
#>     <label class="custom-control-label" for="checkbox-173-407">Rock</label>
#>   </div>
#>   <div class="custom-control custom-checkbox">
#>     <input class="custom-control-input" type="checkbox" id="checkbox-460-63" name="checkbox-460-63" value="Paper" autocomplete="off"/>
#>     <label class="custom-control-label" for="checkbox-460-63">Paper</label>
#>   </div>
#>   <div class="custom-control custom-checkbox">
#>     <input class="custom-control-input" type="checkbox" id="checkbox-485-870" name="checkbox-485-870" value="Scissors" autocomplete="off"/>
#>     <label class="custom-control-label" for="checkbox-485-870">Scissors</label>
#>     <div class="valid-feedback"></div>
#>     <div class="invalid-feedback"></div>
#>   </div>
#> </div>

### Chip input

chipInput(
  id = "chip1",
  choices = c("Ether", "Bombos", "Quake"),
  selected = "Ether"
) %>%
  width("1/2") %>%
  active("green")
#> <div id="chip1" class="yonder-chip btn-group dropup w-1/2 active-green" data-max="-1" data-sort="stack">
#>   <input class="form-control custom-select" data-toggle="dropdown"/>
#>   <div class="dropdown-menu">
#>     <button class="dropdown-item selected" value="Ether">Ether</button>
#>     <button class="dropdown-item" value="Bombos">Bombos</button>
#>     <button class="dropdown-item" value="Quake">Quake</button>
#>   </div>
#>   <div class="chips chips-inline chips-grey">
#>     <button class="chip active" value="Ether">
#>       <span class="chip-content">Ether</span>
#>       <span class="chip-close">&times;</span>
#>     </button>
#>     <button class="chip" value="Bombos">
#>       <span class="chip-content">Bombos</span>
#>       <span class="chip-close">&times;</span>
#>     </button>
#>     <button class="chip" value="Quake">
#>       <span class="chip-content">Quake</span>
#>       <span class="chip-close">&times;</span>
#>     </button>
#>   </div>
#> </div>