Hesoyam

Checkbox

Toggle a single option on or off. Use a group when the user can pick more than one.

Default

Hesoyam API is checked plus @change. v-model and v-model:checked are Vue aliases.


        

          1
          
          <Checkbox :checked="option" @change="option = $event">
        

          2
          
            Option 1
        

          3
          
          </Checkbox>

Disabled


        

          1
          
          <Checkbox disabled>Disabled</Checkbox>
        

          2
          
          <Checkbox checked disabled>Disabled Checked</Checkbox>
        

          3
          
          <Checkbox disabled indeterminate>Disabled Indeterminate</Checkbox>

Indeterminate

Visual only. Drive it from a parent that knows a subset is selected. It is not a third model value.


        

          1
          
          <Checkbox
        

          2
          
            :checked="allSelected"
        

          3
          
            :indeterminate="!allSelected && !noneSelected"
        

          4
          
            @change="toggleAll"
        

          5
          
          >
        

          6
          
            Notifications
        

          7
          
          </Checkbox>

Best practices

  • Multi-select in a list, table rows, or an opt-in group. A single boolean setting (dark mode, password protection) is a Switch.
  • Indeterminate is a dash, not a stored third state. Clear it as soon as every child is fully checked or unchecked. Name the partial count in the group label when it helps: 3 of 5 selected.
  • Required acknowledgments validate on submit, not on blur. Checking and unchecking should not flash an error.
  • Disable only when the choice is impossible, and say why with a Tooltip. A grey box with no reason reads as a bug.
  • The label is the click target. A row-select box with no visible text needs aria-label="Select invoice 1042".
  • Group label is a Title Case noun: Notifications. An acknowledgment is a full sentence with a period: I agree to the Terms of Service.