bind:

Connects a native form control two-way with the nearest state of that name.

Syntax

bind: <custom-property> closest(<selector>)?;

registry syntax: bind: --state [closest(selector)]

Parameters

custom-property<dashed-ident>required

A state declared on the control or an ancestor.

closest()closest(<selector>)optional

Bind to the state owned by exactly this ancestor.

Effect

No value. The control writes the state on input or change, and setting the state updates the control.

Example

/* The preview reads the states, so they live on the form, around both. */.signup {  --name: state("");  --plan: state("basic");  --news: state(false);}/* Copy each control's value up to the form when it changes. */.signup input[type="text"]:on(input)      { --name: set(event(value)); }.signup select:on(change)                 { --plan: set(event(value)); }.signup input[type="checkbox"]:on(change) { --news: set(event(checked)); }.preview .name::after {  content: var(--name);}.preview .badge:when(--news) {  display: inline-block;}

Behavior

• 0.9. bind: is not deprecated. It is still the way to bind a control to a state owned by an ancestor, as a radio group does with fieldset { --size: state("m"); } input { bind: --size; }. For a control bound to its own state, 0.9 adds state(v, bind(value)).
• State-first initialization, except that a control already differing from its HTML default (autofill, restored state) wins.
• Typing never rewrites the field; caret and selection stay. IME composition updates at the end.
• Form reset restores the state’s CSS initial value.
• Strings read as quoted CSS strings, booleans as 1/0.

Supported contexts

• Text-like inputs and <textarea> (string), number and range (number or dimension), checkbox (boolean), radio groups and single <select> (string, keyword or number).
• Unconditional rules only.

Limitations

• Never binds password, one-time-code or payment fields.
• Multiple selects, file, date and color inputs are not supported yet.
• Changes only the bound control’s own value.

Related