Input

import { Input } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Input name="displayName" aria-label="Display name" />
    </>
  )
}

import { Field, Input } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Field label="Email" description="Use your work email.">
        {(control) => <Input {...control} type="email" placeholder="you@company.com" />}
      </Field>
    </>
  )
}

import { Input } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Input aria-label="Email" aria-invalid="true" defaultValue="invalid email" />
    </>
  )
}

import { Input } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Input aria-label="Email" defaultValue="you@company.com" disabled />
    </>
  )
}

import { Input } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Input type="password" aria-label="Password" placeholder="Password" />
      <Input type="number" aria-label="Seats" placeholder="Seats" min="1" />
      <Input type="file" aria-label="Attachment" />
    </>
  )
}

import { Input, Button } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <form>
        <Input type="email" aria-label="Email" placeholder="Email" required />
        <Button type="submit">Subscribe</Button>
      </form>
    </>
  )
}