DocsExtendYour own control

Your own control

A control that takes part in forms extends XoControl. It gets a value, validity, dirty, touched, name and disabled, and talks to the form binder through ElementInternals. You only write the rendering and call userInput() when the person changes something.

import { XoControl, define, html } from '@xoong/core';

class RatingStars extends XoControl {
  render() {
    return html`${[1, 2, 3, 4, 5].map((n) => html`
      <button type="button" aria-pressed=${() => String(this.value >= n)} @click=${() => this.userInput(n)}>★</button>`)}`;
  }
}
define('rating-stars', RatingStars);

<form xo-submit="updateReview">
  <rating-stars name="rating"></rating-stars>
  <button>Save</button>
</form>