# Inputs label changes according to input

**URL:** <https://talk.observablehq.com/t/inputs-label-changes-according-to-input/7679>\
**Category:** Help\
**Created:** [March 1, 2023, 2:30pm UTC](https://talk.observablehq.com/t/inputs-label-changes-according-to-input/7679 "2023-03-01T14:30:36Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![erikneves](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/erikneves/32/6243_2.png) [@erikneves](https://talk.observablehq.com/u/erikneves)\
**Post date:** [March 1, 2023, 2:30pm UTC](https://talk.observablehq.com/t/inputs-label-changes-according-to-input/7679/1 "2023-03-01T14:30:36Z")

</div>

In [this example notebook](https://observablehq.com/d/70685273e667350b), I’m trying to change a text form label according to its own input, which spits out an obvious _circular reference_ error.

How can I change the label of a form using some validation? Is [`checkValidity()`](https://observablehq.com/@observablehq/input-text) involved?

Here’s the code:

```auto
viewof number = Inputs.text({
  label: "Even number " + isEven(number) ? "✅" : "❌"
})

```

```auto
function isEven(number) {
  return number % 2 == 0;
}

```

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [March 1, 2023, 2:54pm UTC](https://talk.observablehq.com/t/inputs-label-changes-according-to-input/7679/2 "2023-03-01T14:54:39Z")

</div>

Does this help?  
[Comparing Changing Inputs Label to Changing Inputs Label | Observable (observablehq.com)](https://observablehq.com/compare/70685273e667350b...e73fa29bd9722e76)

… It’s really not so easy to change the Label field. It’s always interpreted as a string. So rendering in the outputs from another cell doesn’t really work. I tried instead to construct view that might approximate what you’re after.

---

<div class="post-metadata">

**Author:** ![erikneves](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/erikneves/32/6243_2.png) [@erikneves](https://talk.observablehq.com/u/erikneves)\
**Post date:** [March 1, 2023, 3:26pm UTC](https://talk.observablehq.com/t/inputs-label-changes-according-to-input/7679/3 "2023-03-01T15:26:19Z")

</div>

Nice workaround!

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 1, 2023, 8:33pm UTC](https://talk.observablehq.com/t/inputs-label-changes-according-to-input/7679/4 "2023-03-01T20:33:32Z")

</div>

You can work with references inside your cell, before returning the element. Example:

```javascript
viewof number = {
  const myLabel = htl.html`<span>`;
  const input = Inputs.text({ label: myLabel }); // pass in a reference to the Element
  onInput(); // set the initial state
  input.addEventListener("input", onInput);
  return input;

  function onInput() {
    myLabel.textContent = `Even number: ${ isEven(+input.value) ? "✅" : "❌" }`;
  }
}

```

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [March 1, 2023, 8:51pm UTC](https://talk.observablehq.com/t/inputs-label-changes-according-to-input/7679/5 "2023-03-01T20:51:52Z")

</div>

@mootari If I drop your code into a single JS cell, I get

> `viewof number = RuntimeError: label is not defined`

Do I need an additional cell with content?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 1, 2023, 10:09pm UTC](https://talk.observablehq.com/t/inputs-label-changes-according-to-input/7679/6 "2023-03-01T22:09:41Z")

</div>

Whoops, that’s what I get for editing code in Discourse. Fixed! 🙏

---

<div class="post-metadata">

**Author:** ![erikneves](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/erikneves/32/6243_2.png) [@erikneves](https://talk.observablehq.com/u/erikneves)\
**Post date:** [April 15, 2023, 3:33am UTC](https://talk.observablehq.com/t/inputs-label-changes-according-to-input/7679/7 "2023-04-15T03:33:56Z")

</div>

> [@mootari](#):
>
> `myLabel.textContent = `Even number: ${ isEven(+input.value) ? "✅" : "❌" }`;`

`myLabel.textContent = `Even number: ${ isEven("" + input.value) ? "✅" : "❌" }`;`

The added `""` forces a string concatenation. An empty string was returning `0`.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [April 15, 2023, 8:08am UTC](https://talk.observablehq.com/t/inputs-label-changes-according-to-input/7679/8 "2023-04-15T08:08:39Z")

</div>

> [@erikneves](#):
>
> An empty string was returning `0`.

I’d argue that you shouldn’t even pass an empty string to isEven and instead display nothing in that case.

---

<div class="post-metadata">

**Author:** ![erikneves](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/erikneves/32/6243_2.png) [@erikneves](https://talk.observablehq.com/u/erikneves)\
**Post date:** [April 16, 2023, 10:52am UTC](https://talk.observablehq.com/t/inputs-label-changes-according-to-input/7679/9 "2023-04-16T10:52:41Z")

</div>

The example I gave using `isEven` was just that: a simplified example.

I’m actually verifying if a string of 9 digits (e.g., 05231092153, the Brazilian equivalent of the SSN) satisfies a test. The zero on the left matters.