Sortable List Card

Examples

Copy-pastable configs for the most common setups.

Don't forget!
These are getting-started examples. Replace the keys, entities and services with your own, and create the matching input_text helper where needed.

Minimal (CSV input_text)

The smallest useful config: a few items stored as a comma-separated value in an input_text helper.

yaml
type: custom:sortable-list-card
title: My order
entity: input_text.my_order
items:
  - key: alpha
    name: Alpha
  - key: beta
    name: Beta
  - key: gamma
    name: Gamma

HEMS load priority (the original use case)

Order the loads your home energy management system should serve first. Your automations read input_text.hems_priority (a list like battery,ev,heating) to decide who gets surplus solar.

yaml
type: custom:sortable-list-card
title: Load priority
entity: input_text.hems_priority
items:
  - key: battery
    name: Battery
    icon: mdi:battery-charging
  - key: ev
    name: EV charger
    icon: mdi:car-electric
  - key: heating
    name: Heating
    icon: mdi:radiator
  - key: water_heater
    name: Hot water
    icon: mdi:water-boiler

With a matching helper:

yaml
input_text:
  hems_priority:
    name: HEMS Priority
    max: 255
    initial: battery,ev,heating,water_heater

Entity-backed rows + a custom script

Items can reference entities, pulling their name, icon and state. Here the order is stored as JSON and handed to a script as a real list.

yaml
type: custom:sortable-list-card
title: Rooms
show_state: true
value_format: json
entity: input_text.room_order
save_action:
  service: script.save_room_order
  data:
    order: "{value_list}"
items:
  - entity: light.kitchen
  - entity: light.living_room
  - entity: light.bedroom

Write-only via a custom service (no entity)

If your automation owns the source of truth, you can skip entity entirely and just fire a service on each reorder.

yaml
type: custom:sortable-list-card
title: Notification order
save_action:
  service: script.set_notification_order
  data:
    keys: "{value_csv}"
items:
  - key: critical
    name: Critical alerts
    icon: mdi:alert
  - key: reminders
    name: Reminders
    icon: mdi:bell
  - key: digest
    name: Daily digest
    icon: mdi:email

Bare list (no handle, no arrows)

Hide the chrome for a cleaner, drag-only list.

yaml
type: custom:sortable-list-card
entity: input_text.my_order
show_handle: false
show_arrows: false
show_rank: false
items:
  - key: one
    name: One
  - key: two
    name: Two