Alpine JS change label / textbox value based on select option

Question

Is it possible to change a label and textfield value based on a select option in AlpineJS?

On page load, i would like the select option to be local and the label below to be 'Define' and the textbox value to be 'define here', but if someone chooses remote then the label to read 'Remote Define' and the textfield value to be 'remote define here'.

Is that possible with AlpineJS? The code i have is as follows;

<div>
    <label for="location">Location</label>
    <div>
        <select id="location">
            <option value="local">Local</option>
            <option value="remote">Remote</option>
        </select>
    </div>
</div>

<div>
    <label for="define">Define</label>
    <input id="define" type="text" autocomplete="off">
</div>

Answer 1

With Alpine.js you can use x-model to 2-way bind an input/select (2-way because a value update in the component state/JS will update the input/select and a change to the input/select will update component state/value in JS). You can use x-model to deal with the location value updates. Note that you need a wrapping element with x-data on it.

Alpine.js also provides a way to set the text ( x-text ) and to bind to arbitrary attributes x-bind , in your case, you want to set the placeholder value so x-bind:placeholder .

In full:

<form x-data="{ location: 'local' }">
<div>
    <label for="location">Location</label>
    <div>
        <select id="location" x-model="location">
            <option value="local">Local</option>
            <option value="remote">Remote</option>
        </select>
    </div>
</div>

<div>
    <label for="define" x-text="location === 'local' ? 'Define' : 'Remote Define'"></label>
    <input id="define" type="text" autocomplete="off" x-bind:placeholder="location === 'local' ? 'define here' : 'remote define here">
</div>
</form>