Input

<!-- Basic text input -->
<wa-input
  label="Full name"
  placeholder="Enter your name"
  type="text"
  name="full-name"
  autocomplete="name"
></wa-input>

<!-- With helper text -->
<wa-input
  label="Email address"
  type="email"
  help-text="We'll send your confirmation here."
  name="email"
  autocomplete="email"
></wa-input>

<!-- Password with toggle -->
<wa-input
  label="Password"
  type="password"
  password-toggle
  help-text="Must be at least 8 characters."
  name="password"
  autocomplete="new-password"
></wa-input>

<!-- Required field -->
<wa-input
  label="Organisation name"
  type="text"
  required
  name="org-name"
></wa-input>

<!-- Error state — manual implementation -->
<div class="form-field">
  <label for="email-input" class="field-label">
    Email address
    <span aria-hidden="true" class="required-indicator">*</span>
    <span class="sr-only">required</span>
  </label>
  <input
    id="email-input"
    type="email"
    name="email"
    class="field-input field-input--error"
    aria-invalid="true"
    aria-describedby="email-error"
    value="not-an-email"
    autocomplete="email"
  />
  <p id="email-error" class="field-error" role="alert">
    Enter a valid email address (e.g. name@example.com).
  </p>
</div>

<!-- Web Awesome error state -->
<wa-input
  id="email-sl"
  label="Email address"
  type="email"
  value="not-an-email"
  help-text="Enter a valid email address (e.g. name@example.com)."
  class="input--error"
  aria-invalid="true"
  aria-describedby="email-wa-help"
></wa-input>

import '@shoelace-style/web-awesome/dist/components/input/input.js';

function EmailField() {
  const [value, setValue] = React.useState('');
  const [error, setError] = React.useState('');

  function validate(v: string) {
    if (!v) return 'Email address is required.';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) {
      return 'Enter a valid email address (e.g. name@example.com).';
    }
    return '';
  }

  function handleBlur() {
    setError(validate(value));
  }

  return (
    <wa-input
      label="Email address"
      type="email"
      value={value}
      onSlInput={(e) => setValue(e.target.value)}
      onBlur={handleBlur}
      help-text={error || "We'll send your confirmation here."}
      class={error ? 'input--error' : ''}
      aria-invalid={error ? 'true' : 'false'}
    />
  );
}

<!-- Social Point Vue component -->
<SPFormField
  label="Email address"
  hint="We'll send your confirmation here."
  :error="emailError"
  v-model="email"
>
  <input type="email" />
</SPFormField>

<wa-input
  label="Email address"
  type="email"
  help-text="We'll send your confirmation here."
  :aria-invalid="hasError ? 'true' : 'false'"
  name="email"
  autocomplete="email"
></wa-input>