# Options - agent guide

> Normative extract of the EchoSistema template for the page
> `/componentes/opcoes`. Copy it verbatim: tag names, props, events and classes
> are contract.
>
> Full guide (rules, tokens and every family): `/agents/echosistema-ui.md`

## Rules that apply before any line of code

- Colour only through tokens (`text-fg1`, `bg-panel`, `border-line`, `.es-i--*`); never a hex, never a Tailwind colour.
- Two axes: the intent gives the colour, the variant consumes it. Never combine them by hand.
- Visible text through `t()`; tag names, props and classes stay literal.
- A component does not fetch: it takes props and emits events.
- An icon alone inside a button needs an `aria-label`.

```vue
<echo-checkbox v-model="agreed">I accept the terms</echo-checkbox>
<echo-radio v-model="skin" name="skin" value="bordered">Bordered</echo-radio>
<echo-switch v-model="on">Active</echo-switch>
<echo-slider v-model="zoom" :min="1" :max="4" :step="0.01" />
<echo-rating v-model="stars" />
```

`size`: `sm` `lg` (no prop = medium).

Two traps that come up every time:

1. To disable a whole group use `<fieldset disabled>`. A `disabled` passed as a
   prop would land on the `<label>` wrapping the `<input>` and be decorative.
2. `required` on `<echo-checkbox>` has the same problem: validate the consent on
   submit, in code.

---

Source: `app/components/echo/{Checkbox,Radio,Switch,Slider,Rating}.vue`