Keypad

Just built a virtual keypad to go with my physical one, seems to work:

    type: vertical-stack
    cards:
      - type: grid
        columns: 3
        square: false
        cards:
          - type: custom:button-card
            name: "1"
            tap_action:
              action: call-service
              service: input_text.set_value
              data:
                value: "[[[ return states['input_text.entered_pin'].state + '1'; ]]]"
              target:
                entity_id: input_text.entered_pin
            styles:
              card:
                - height: 80px
                - font-size: 32px
                - background-color: "#2196f3"
                - color: white
                - border-radius: 12px
          - type: custom:button-card
            name: "2"
            tap_action:
              action: call-service
              service: input_text.set_value
              data:
                value: "[[[ return states['input_text.entered_pin'].state + '2'; ]]]"
              target:
                entity_id: input_text.entered_pin
            styles:
              card:
                - height: 80px
                - font-size: 32px
                - background-color: "#2196f3"
                - color: white
                - border-radius: 12px
          - type: custom:button-card
            name: "3"
            tap_action:
              action: call-service
              service: input_text.set_value
              data:
                value: "[[[ return states['input_text.entered_pin'].state + '3'; ]]]"
              target:
                entity_id: input_text.entered_pin
            styles:
              card:
                - height: 80px
                - font-size: 32px
                - background-color: "#2196f3"
                - color: white
                - border-radius: 12px
          - type: custom:button-card
            name: "4"
            tap_action:
              action: call-service
              service: input_text.set_value
              data:
                value: "[[[ return states['input_text.entered_pin'].state + '4'; ]]]"
              target:
                entity_id: input_text.entered_pin
            styles:
              card:
                - height: 80px
                - font-size: 32px
                - background-color: "#2196f3"
                - color: white
                - border-radius: 12px
          - type: custom:button-card
            name: "5"
            tap_action:
              action: call-service
              service: input_text.set_value
              data:
                value: "[[[ return states['input_text.entered_pin'].state + '5'; ]]]"
              target:
                entity_id: input_text.entered_pin
            styles:
              card:
                - height: 80px
                - font-size: 32px
                - background-color: "#2196f3"
                - color: white
                - border-radius: 12px
          - type: custom:button-card
            name: "6"
            tap_action:
              action: call-service
              service: input_text.set_value
              data:
                value: "[[[ return states['input_text.entered_pin'].state + '6'; ]]]"
              target:
                entity_id: input_text.entered_pin
            styles:
              card:
                - height: 80px
                - font-size: 32px
                - background-color: "#2196f3"
                - color: white
                - border-radius: 12px
          - type: custom:button-card
            name: "7"
            tap_action:
              action: call-service
              service: input_text.set_value
              data:
                value: "[[[ return states['input_text.entered_pin'].state + '7'; ]]]"
              target:
                entity_id: input_text.entered_pin
            styles:
              card:
                - height: 80px
                - font-size: 32px
                - background-color: "#2196f3"
                - color: white
                - border-radius: 12px
          - type: custom:button-card
            name: "8"
            tap_action:
              action: call-service
              service: input_text.set_value
              data:
                value: "[[[ return states['input_text.entered_pin'].state + '8'; ]]]"
              target:
                entity_id: input_text.entered_pin
            styles:
              card:
                - height: 80px
                - font-size: 32px
                - background-color: "#2196f3"
                - color: white
                - border-radius: 12px
          - type: custom:button-card
            name: "9"
            tap_action:
              action: call-service
              service: input_text.set_value
              data:
                value: "[[[ return states['input_text.entered_pin'].state + '9'; ]]]"
              target:
                entity_id: input_text.entered_pin
            styles:
              card:
                - height: 80px
                - font-size: 32px
                - background-color: "#2196f3"
                - color: white
                - border-radius: 12px
          - type: custom:button-card
            name: Clear
            tap_action:
              action: call-service
              service: input_text.set_value
              data:
                value: ""
              target:
                entity_id: input_text.entered_pin
            styles:
              card:
                - height: 80px
                - font-size: 26px
                - background-color: "#f44336"
                - color: white
                - border-radius: 12px
          - type: custom:button-card
            name: "0"
            tap_action:
              action: call-service
              service: input_text.set_value
              data:
                value: "[[[ return states['input_text.entered_pin'].state + '0'; ]]]"
              target:
                entity_id: input_text.entered_pin
            styles:
              card:
                - height: 80px
                - font-size: 32px
                - background-color: "#2196f3"
                - color: white
                - border-radius: 12px
          - type: custom:button-card
            name: Enter
            tap_action:
              action: call-service
              service: script.turn_on
              target:
                entity_id: script.validate_pin
            styles:
              card:
                - height: 80px
                - font-size: 26px
                - background-color: "#4caf50"
                - color: white
                - border-radius: 12px

There's probably a better way to go about it but, just a POC.

Requires

    input_text:
      entered_pin:
        name: Entered PIN
        initial: ""
        max: 20
      correct_pin:
        name: Correct PIN
        max: 20

and a script validate\_pin to do the validation against correct\_pin - I have an input box where I can set that on my admin dash.