📝 Form Card

A powerful custom Home Assistant Lovelace card designed to create dynamic forms and handle form-based actions with ease.

Form Card enables you to integrate highly customizable forms into your dashboards, using Home Assistant-provided selectors. Pair it with form-entity-row to embed form fields inside entity rows for seamless user experiences.

---

⚠️ UI BUG FOR PEOPLE USING card-mod! ⚠️

Having issues with the UI editor when using card-mod with form-card? A PR which fixes this issue has been submitted, and will hopefully be merged soon.

---

Features

• Dynamic Form Field Support: Build forms with various input types using Home Assistant selectors.
• Action Triggers: Perform actions when forms are submitted or values are changed.
• Data Management: Spread values directly into action payloads or nest them under a key for structured data.
• Templating: Utilize Jinja2 templates in field names, values, or action data for configurable dynamic behavior.
• Entity Row Integration: Add form fields directly to entity rows with form-entity-row.

---

Installation

HACS

form-card is available in HACS (Home Assistant Community Store).

Use this link to directly go to the repository in HACS

or

1. Install HACS if you don't have it already
2. Open HACS in Home Assistant
3. Search for "Mushroom"
4. Click the download button. ⬇️

Manual

1. Download form-card.js file from the latest release.
2. Put form-card.js file into your config/www folder.
3. Add reference to form-card.js in Dashboard. There's two way to do that:

• Using UI: Settings → Dashboards → More Options icon → Resources → Add Resource → Set Url as /local/form-card.js → Set Resource type as JavaScript Module. Note: If you do not see the Resources menu, you will need to enable Advanced Mode in your User Profile
• Using YAML: Add following code to lovelace section.

  resources:
      - url: /local/form-card.js
        type: module

---

Configuration

Basic Example

YAML:

type: custom:form-card
title: My Custom Form
fields:
  - name: text_field
    label: Text Field
    entity: input_text.my_text
    selector:
      text: { }
  - name: number_field
    label: Number Field
    selector:
      number:
        min: 0
        max: 100
        step: 1
    default: "50"
save_action:
  action: call-service
  service: input_text.set_value
  target:
    entity_id: input_text.my_text
  data:
    value: "{{ value['number_field'] }}"

---

Options

Parameter	Type	Default	Required?	Description
type	string	N/A	✅	Must be set to custom:form-card.
title	string	N/A	❌	Title of the form card.
fields	array	N/A	✅	Array defining form fields (see field options below).
reset_on_submit	boolean	false	❌	If true, resets the form on submit.
spread_values_to_data	boolean	false	❌	If true, spreads form values into action payload directly.
save_action	action	N/A	❌	Defines what action occurs when the form is submitted.
save_label	string	N/A	❌	Label for the save button.
hide_undo_button	boolean	false	❌	If true, hides the undo button.

Entity row options

Parameter	Type	Default	Required?	Description
type	string	N/A	✅	Must be set to custom:form-entity-row.
selector	selector	N/A	✅	Selector configuration.
entity	string	N/A	❌	Entity ID for the field.
label	string	N/A	❌	Display name for the field.
default	any	entity state	❌	Default value for the field. Will be set to entity (if specified) state if not provided.
icon	string	N/A	❌	Icon for the field.
spread_values_to_data	boolean	false	❌	If true, spreads form values into action payload directly (under the key value).
change_action	action	N/A	❌	Defines what action occurs when the field is changed.

If entity is provided, it will be used as the default value for target in your change_action.

Field Options

Each element in the fields array supports the following options:

Parameter	Type	Default	Required?	Description
name	string	N/A	✅	Unique identifier for the field.
label	string	N/A	❌	Display name for the field.
entity	string	N/A	❌	Entity ID for the field.
selector	selector	N/A	✅	Selector configuration.
default	any	entity state	❌	Default value for the field. Will be set to entity (if specified) state if not provided.
description	string	N/A	❌	Description for the field.
placeholder	string	N/A	❌	Placeholder text for the field.
required	boolean	false	❌	Marks the field as required.
disabled	boolean	false	❌	Whether the field is disabled.

All options accept jinja2 templates.

The templates have access to a few special variables. Those are:

• config - an object containing the card configuration
• user - the username of the currently logged in user

For entity rows and fields with entity specified, the following variables are also available:

• entity - the entity ID of the field

---

Examples

Dynamic Field Values Example

YAML:

type: custom:form-card
title: Dynamic Input
fields:
  - name: temperature
    label: Desired Temperature
    entity: climate.living_room
    selector:
      number:
        min: 10
        max: 30
        step: 1
    default: "{{ state_attr(entity, 'temperature') }}"
save_action:
  action: call-service
  service: climate.set_temperature
  target:
    entity_id: climate.living_room
  data:
    temperature: "{{ value['temperature'] }}"

---

Embedded Entity Row Example

YAML:

type: entities
entities:
  - type: custom:form-entity-row
    entity: input_text.my_text
    label: Custom Input
    default: "Default Value"
    change_action:
      action: call-service
      service: input_text.set_value
      data:
        value: "{{ value }}"
# or (equivalent):
    spread_values_to_data: true
    change_action:
      action: call-service
      service: input_text.set_value

---