Interaction and behavior¶
Cards can do more than show information. A tap can open details or run an action. Items can appear, disappear, or change when information changes. Controls add buttons, toggles, selectors, number steppers, and sliders directly to a card.
| Goal | Use |
|---|---|
| Open details, toggle an entity, navigate, or run an action | Actions |
| Show, hide, or disable a tool based on the current card state | Visibility |
| Change or animate a tool when an entity reaches a state | Animations |
| Add buttons, toggles, selectors, steppers, or sliders to the card | Interactive controls |
Interactive controls¶
Controls are extra visible tools for changing a value or making a choice directly in the card. Buttons, toggles, selectors, number steppers, and sliders are documented under Card tools > Interactive controls:
| Control | Use |
|---|---|
| Button | Run a tap, hold, or double-tap action. |
| Number | Increase or decrease a numeric value. |
| Select | Choose one option from a visible list. |
| Slider | Set one numeric value or a lower and upper value. |
| Toggle | Change an entity or Flexible Horseshoe Card input between on and off. |
Use Actions to configure what a button or actionable tool does. Use browser-local Flexible Horseshoe Card inputs when a control should change only Flexible Horseshoe Card cards in the current browser.