{% load widget_tweaks %}

<script src="//unpkg.com/alpinejs" defer></script>

<form method="post" x-data>
    <div style="border: 1px solid blue; margin: 1em">
        {% csrf_token %}
        {% for colour_id, colour in colour_form.fields.colour.choices %}
        <p>
            <button @click="$refs.colour_input.value = {{ colour_id }}; $root.submit()" type="button">{{ colour }}</button>:
            {% if colour_id == colour_form.colour.value %}<strong>selected</strong>{% else %}not selected{% endif %}
        </p>
        {% endfor %}

        {{ colour_form.colour|attr:"x-ref:colour_input" }}
    </div>
</form>

<p>Debug:</p>
<table>
    <thead>
        <tr>
            <td>colour_id</td>
            <td>colour_form.colour.value</td>
        </tr> 
    </thead>
    {% for colour_id, colour in colour_form.fields.colour.choices %}
    <tr>
        <td>{{ colour_id }}</td>
        <td>{{ colour_form.colour.value }}</td>
    </tr>    
    {% endfor %}
</table>