Components in any app

Register the elements you use

Each element has a registration entry, @oddkin/components/define/<name>. Importing it defines the tag; importing anything else registers nothing.

import '@oddkin/components/define/button';
import '@oddkin/components/define/input';

<form>
  <odd-input name="email" type="email" label="Email" required></odd-input>
  <odd-button appearance="primary" type="submit">Subscribe</odd-button>
</form>

Load a theme stylesheet too (Tokens only): component styles read the semantic tokens.

Native forms

Form controls are form-associated: they submit with name, take part in validation and reset, and follow disabled fieldsets, so new FormData(form) reads them like native fields.

Markup you do not control

For content written by people or agents, the optional autoloader registers each odd-* element when its tag first appears. For an application, import each entry instead: a bundler sees it and nothing is fetched after the first render.

import '@oddkin/components/autoload';

Next

• Components: every element with its API and examples.
• Framework guides: React, Angular, Vue, and Svelte.
• Forms and accessibility