Input

npm install @eunomia/elements

import "@eunomia/elements/input.js";
import "@eunomia/elements/label.js";

<eun-input label="Email address" placeholder="jane.doe@email.com"></eun-input>

Importing the file registers <eun-input> as a custom element, with no further setup needed. It works with any framework, or none, since it's a standard web component.

npm install @eunomia/elements

<script type="module">
  import "@eunomia/elements/input.js";
</script>

<eun-input label="Email address"></eun-input>

npm install @eunomia/elements

import "@eunomia/elements/input.js";

function EmailField() {
  return <eun-input label="Email address" name="email" />;
}

npm install @eunomia/elements

"use client";
import "@eunomia/elements/input.js";

export function EmailField() {
  return <eun-input label="Email address" name="email" />;
}

npm install @eunomia/elements

<script setup>
  import "@eunomia/elements/input.js";
</script>

<template>
  <eun-input label="Email address" name="email"></eun-input>
</template>

npm install @eunomia/elements

import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
import "@eunomia/elements/input.js";

@Component({
  selector: "app-email-field",
  template: `<eun-input label="Email address" name="email"></eun-input>`,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class EmailFieldComponent {}

<eun-input
  label="Email"
  type="email"
  placeholder="jane.doe@email.com"
></eun-input>

<eun-input label="Email" type="email" placeholder="jane.doe@email.com" />

<eun-input
  label="Quantity"
  type="number"
  min="1"
  max="10"
  step="1"
  hint="Between 1 and 10"
></eun-input>

<eun-input
  label="Quantity"
  type="number"
  min="1"
  max="10"
  step="1"
  hint="Between 1 and 10"
/>

<eun-input label="Password" type="password"></eun-input>

<eun-input label="Password" type="password" />

<eun-input
  label="Email address"
  type="email"
  placeholder="jane.doe@email.com"
  instructions="We'll never share this with third parties"
></eun-input>

<eun-input
  label="Email address"
  type="email"
  placeholder="jane.doe@email.com"
  instructions="We'll never share this with third parties"
/>

<eun-input
  label="Collection title"
  value="Spring collection"
  readonly-available
  hide-label
></eun-input>

<eun-input
  label="Collection title"
  value="Spring collection"
  readonly-available
  hide-label
/>

<eun-input label="Flat" appearance="flat"></eun-input>
<eun-input label="Underline" appearance="underline"></eun-input>

<eun-input label="Flat" appearance="flat" />
<eun-input label="Underline" appearance="underline" />

<eun-input
  label="Email address"
  type="email"
  icon="mail"
  placeholder="jane.doe@email.com"
></eun-input>

<eun-input
  label="Email address"
  type="email"
  icon="mail"
  placeholder="jane.doe@email.com"
/>

<eun-input label="Email address" type="email" placeholder="jane.doe@email.com">
  <svg
    slot="icon"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
  >
    <path d="M4 4h16v16H4z"></path>
    <path d="m4 4 8 8 8-8"></path>
  </svg>
</eun-input>

<eun-input label="Email address" type="email" placeholder="jane.doe@email.com">
  <svg
    slot="icon"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
  >
    <path d="M4 4h16v16H4z" />
    <path d="m4 4 8 8 8-8" />
  </svg>
</eun-input>

<eun-input label="Search" type="search" clearable value="eunomia"></eun-input>

<eun-input label="Search" type="search" clearable value="eunomia" />

<eun-input label="Disabled" disabled value="Can't edit"></eun-input>
<eun-input
  label="Readonly"
  readonly
  value="Can't edit, still submits"
></eun-input>
<eun-input label="Required" required hint="This field is mandatory"></eun-input>

<eun-input label="Disabled" disabled value="Can't edit" />
<eun-input label="Readonly" readonly value="Can't edit, still submits" />
<eun-input label="Required" required hint="This field is mandatory" />

<eun-input
  id="username"
  label="Username"
  hint="At least 4 characters"
></eun-input>

const field = document.querySelector("#username");
field.validators = [
  {
    isValid: (value) => !value || value.length > 3,
    message: "Please enter at least 4 characters",
  },
];
field.addEventListener("eunchange", () => field.checkValidity(field.value));

import { useEffect, useRef } from "react";

const usernameValidators = [
  {
    isValid: (value) => !value || value.length > 3,
    message: "Please enter at least 4 characters",
  },
];

function UsernameField() {
  const fieldRef = useRef(null);

  useEffect(() => {
    const field = fieldRef.current;
    field.validators = usernameValidators;
    const onChange = () => field.checkValidity(field.value);
    field.addEventListener("eunchange", onChange);
    return () => field.removeEventListener("eunchange", onChange);
  }, []);

  return (
    <eun-input ref={fieldRef} label="Username" hint="At least 4 characters" />
  );
}

<script setup>
  import { ref, onMounted } from "vue";

  const field = ref(null);

  onMounted(() => {
    field.value.validators = [
      {
        isValid: (value) => !value || value.length > 3,
        message: "Please enter at least 4 characters",
      },
    ];
  });

  const onChange = (event) => event.target.checkValidity(event.target.value);
</script>

<template>
  <eun-input
    ref="field"
    label="Username"
    hint="At least 4 characters"
    @eunchange="onChange"
  ></eun-input>
</template>

import {
  AfterViewInit,
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  ElementRef,
  ViewChild,
} from "@angular/core";

@Component({
  selector: "app-username-field",
  template: `
    <eun-input
      #field
      label="Username"
      hint="At least 4 characters"
      (eunchange)="onChange()"
    ></eun-input>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class UsernameFieldComponent implements AfterViewInit {
  @ViewChild("field") field!: ElementRef<any>;

  ngAfterViewInit() {
    this.field.nativeElement.validators = [
      {
        isValid: (value: string) => !value || value.length > 3,
        message: "Please enter at least 4 characters",
      },
    ];
  }

  onChange() {
    const field = this.field.nativeElement;
    field.checkValidity(field.value);
  }
}

<eun-input
  readonly-available
  label="Email address"
  value="jane.doe@email.com"
  clearable
></eun-input>

document
  .querySelector("eun-input[readonly-available]")
  .addEventListener("euncommit", (event) => save(event.target.value));

import { useEffect, useRef } from "react";

function EmailField() {
  const fieldRef = useRef(null);

  useEffect(() => {
    const field = fieldRef.current;
    const onCommit = (event) => save(event.target.value);
    field.addEventListener("euncommit", onCommit);
    return () => field.removeEventListener("euncommit", onCommit);
  }, []);

  return (
    <eun-input
      ref={fieldRef}
      readonly-available
      clearable
      label="Email address"
      value="jane.doe@email.com"
    />
  );
}

<script setup>
  const onCommit = (event) => save(event.target.value);
</script>

<template>
  <eun-input
    readonly-available
    clearable
    label="Email address"
    value="jane.doe@email.com"
    @euncommit="onCommit"
  ></eun-input>
</template>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@Component({
  selector: "app-email-field",
  template: `
    <eun-input
      readonly-available
      clearable
      label="Email address"
      value="jane.doe@email.com"
      (euncommit)="onCommit($event)"
    ></eun-input>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class EmailFieldComponent {
  onCommit(event: any) {
    save(event.target.value);
  }
}

<form id="my-form">
  <eun-input name="firstName" label="First name" required></eun-input>
  <eun-input
    name="email"
    label="Email address"
    type="email"
    icon="mail"
    clearable
    required
  ></eun-input>
  <eun-input name="age" label="Age" type="number" min="0" max="120"></eun-input>
  <eun-button type="submit" rounded>Submit</eun-button>
  <eun-button type="reset" appearance="flat" rounded>Reset</eun-button>
</form>

const form = document.querySelector("#my-form");
const renderOutput = () => console.log(Object.fromEntries(new FormData(form)));

form.addEventListener("eunchange", renderOutput);
form.addEventListener("submit", (event) => {
  event.preventDefault(); // replace with a real submission
  renderOutput();
});
form.addEventListener("reset", () => setTimeout(renderOutput));

import { useEffect, useRef } from "react";

function MyForm() {
  const formRef = useRef(null);

  useEffect(() => {
    const form = formRef.current;
    const renderOutput = () =>
      console.log(Object.fromEntries(new FormData(form)));
    const onSubmit = (event) => {
      event.preventDefault(); // replace with a real submission
      renderOutput();
    };
    const onReset = () => setTimeout(renderOutput);

    form.addEventListener("eunchange", renderOutput);
    form.addEventListener("submit", onSubmit);
    form.addEventListener("reset", onReset);
    return () => {
      form.removeEventListener("eunchange", renderOutput);
      form.removeEventListener("submit", onSubmit);
      form.removeEventListener("reset", onReset);
    };
  }, []);

  return (
    <form ref={formRef}>
      <eun-input name="firstName" label="First name" required />
      <eun-input
        name="email"
        label="Email address"
        type="email"
        icon="mail"
        clearable
        required
      />
      <eun-input name="age" label="Age" type="number" min="0" max="120" />
      <eun-button type="submit" rounded>
        Submit
      </eun-button>
      <eun-button type="reset" appearance="flat" rounded>
        Reset
      </eun-button>
    </form>
  );
}

<script setup>
  import { ref } from "vue";

  const form = ref(null);
  const renderOutput = () =>
    console.log(Object.fromEntries(new FormData(form.value)));
  const onSubmit = (event) => {
    event.preventDefault(); // replace with a real submission
    renderOutput();
  };
  const onReset = () => setTimeout(renderOutput);
</script>

<template>
  <form
    ref="form"
    @eunchange="renderOutput"
    @submit="onSubmit"
    @reset="onReset"
  >
    <eun-input name="firstName" label="First name" required></eun-input>
    <eun-input
      name="email"
      label="Email address"
      type="email"
      icon="mail"
      clearable
      required
    ></eun-input>
    <eun-input
      name="age"
      label="Age"
      type="number"
      min="0"
      max="120"
    ></eun-input>
    <eun-button type="submit" rounded>Submit</eun-button>
    <eun-button type="reset" appearance="flat" rounded>Reset</eun-button>
  </form>
</template>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@Component({
  selector: "app-my-form",
  template: `
    <form
      #form
      (eunchange)="renderOutput(form)"
      (submit)="onSubmit($event, form)"
      (reset)="onReset(form)"
    >
      <eun-input name="firstName" label="First name" required></eun-input>
      <eun-input
        name="email"
        label="Email address"
        type="email"
        icon="mail"
        clearable
        required
      ></eun-input>
      <eun-input
        name="age"
        label="Age"
        type="number"
        min="0"
        max="120"
      ></eun-input>
      <eun-button type="submit" rounded>Submit</eun-button>
      <eun-button type="reset" appearance="flat" rounded>Reset</eun-button>
    </form>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MyFormComponent {
  renderOutput(form: HTMLFormElement) {
    console.log(Object.fromEntries(new FormData(form)));
  }

  onSubmit(event: Event, form: HTMLFormElement) {
    event.preventDefault(); // replace with a real submission
    this.renderOutput(form);
  }

  onReset(form: HTMLFormElement) {
    setTimeout(() => this.renderOutput(form));
  }
}

<eun-input
  label="Custom"
  style="
    --field-border-color: #b45309;
    --field-border-color-hover: #92400e;
    --field-border-color-focus: #92400e;
    --field-border-radius: 2px;
  "
></eun-input>

<eun-input
  label="Custom"
  style={{
    "--field-border-color": "#b45309",
    "--field-border-color-hover": "#92400e",
    "--field-border-color-focus": "#92400e",
    "--field-border-radius": "2px",
  }}
/>