Input

---
import {
  Field,
  Input
} from '@santi020k/lumen-astro'
---

<div style="display: grid; gap: 0.75rem; max-width: 20rem;">
  <Field>
    <label for="ex-input-small">Small input</label>
    <Input id="ex-input-small" name="small-input" placeholder="Small" size="sm" />
  </Field>
  <Field>
    <label for="ex-input-email">Email</label>
    <Input id="ex-input-email" name="email" placeholder="you@example.com" type="email" />
  </Field>
  <Field>
    <label for="ex-input-large">Large input</label>
    <Input id="ex-input-large" name="large-input" placeholder="Large" size="lg" />
  </Field>
  <Field>
    <label for="ex-input-disabled">Disabled input</label>
    <Input id="ex-input-disabled" name="disabled-input" disabled placeholder="Disabled" />
  </Field>
  <Field>
    <label for="ex-input-invalid">Workspace slug</label>
    <Input
      aria-describedby="ex-input-invalid-error"
      aria-invalid="true"
      id="ex-input-invalid"
      name="workspace-slug"
      value="lumen docs"
    />
    <p id="ex-input-invalid-error">Use lowercase letters, numbers, and hyphens only.</p>
  </Field>
</div>

import { Field, Input } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <div style={{ display: 'grid', gap: '0.75rem', maxWidth: '20rem' }}>
      <Field>
        <label htmlFor="ex-input-small">Small input</label>
        <Input id="ex-input-small" name="small-input" placeholder="Small" size="sm" />
      </Field>
      <Field>
        <label htmlFor="ex-input-email">Email</label>
        <Input id="ex-input-email" name="email" placeholder="you@example.com" type="email" />
      </Field>
      <Field>
        <label htmlFor="ex-input-large">Large input</label>
        <Input id="ex-input-large" name="large-input" placeholder="Large" size="lg" />
      </Field>
      <Field>
        <label htmlFor="ex-input-disabled">Disabled input</label>
        <Input id="ex-input-disabled" name="disabled-input" disabled placeholder="Disabled" />
      </Field>
      <Field>
        <label htmlFor="ex-input-invalid">Workspace slug</label>
        <Input
          aria-describedby="ex-input-invalid-error"
          aria-invalid="true"
          id="ex-input-invalid"
          name="workspace-slug"
          defaultValue="lumen docs"
        />
        <p id="ex-input-invalid-error">Use lowercase letters, numbers, and hyphens only.</p>
      </Field>
    </div>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div style="display: grid; gap: 0.75rem; max-width: 20rem;">
  <lumen-field>
    <label for="ex-input-small">Small input</label>
    <lumen-input id="ex-input-small" name="small-input" placeholder="Small" size="sm"></lumen-input>
  </lumen-field>
  <lumen-field>
    <label for="ex-input-email">Email</label>
    <lumen-input id="ex-input-email" name="email" placeholder="you@example.com" type="email"></lumen-input>
  </lumen-field>
  <lumen-field>
    <label for="ex-input-large">Large input</label>
    <lumen-input id="ex-input-large" name="large-input" placeholder="Large" size="lg"></lumen-input>
  </lumen-field>
  <lumen-field>
    <label for="ex-input-disabled">Disabled input</label>
    <lumen-input id="ex-input-disabled" name="disabled-input" disabled placeholder="Disabled"></lumen-input>
  </lumen-field>
  <lumen-field>
    <label for="ex-input-invalid">Workspace slug</label>
    <lumen-input
      aria-describedby="ex-input-invalid-error"
      aria-invalid="true"
      id="ex-input-invalid"
      name="workspace-slug"
      value="lumen docs"></lumen-input>
    <p id="ex-input-invalid-error">Use lowercase letters, numbers, and hyphens only.</p>
  </lumen-field>
</div>