Form controls

import { FormDescription, FormGroup, FormInput, FormLabel } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormGroup style={{ width: '100%', maxWidth: 480 }}>
      <FormLabel htmlFor="controls-company">Company</FormLabel>
      <FormDescription id="controls-company-description">
        As it appears on your invoices.
      </FormDescription>
      <FormInput
        type="text"
        name="controls-company"
        autoComplete="organization"
        aria-describedby="controls-company-description"
      />
    </FormGroup>
  )
}

import { FormGroup, FormInput, FormLabel } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ display: 'grid', gap: 24, width: '100%', maxWidth: 480 }}>
      <FormGroup>
        <FormLabel htmlFor="state-default">Default</FormLabel>
        <FormInput type="text" name="state-default" placeholder="Placeholder text" />
      </FormGroup>
      <FormGroup>
        <FormLabel htmlFor="state-invalid">Invalid</FormLabel>
        <FormInput
          type="email"
          name="state-invalid"
          defaultValue="jane@"
          className="is-invalid"
          aria-invalid
        />
      </FormGroup>
      <FormGroup>
        <FormLabel htmlFor="state-disabled">Disabled</FormLabel>
        <FormInput type="text" name="state-disabled" defaultValue="Read only" disabled />
      </FormGroup>
    </div>
  )
}

import { FormGroup, FormLabel, FormTextarea } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormGroup style={{ width: '100%', maxWidth: 480 }}>
      <FormLabel htmlFor="controls-notes">Notes</FormLabel>
      <FormTextarea
        name="controls-notes"
        placeholder="Anything we should know?"
        style={{ height: 140 }}
      />
    </FormGroup>
  )
}

import { FormGroup, FormFileInput, FormLabel } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormGroup style={{ width: '100%', maxWidth: 480 }}>
      <FormLabel htmlFor="controls-cv">CV</FormLabel>
      <FormFileInput name="controls-cv" accept=".pdf,.doc,.docx" />
    </FormGroup>
  )
}

import { FormGroup, FormInput, FormInvalidMessage, FormLabel } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormGroup style={{ width: '100%', maxWidth: 480 }}>
      <FormLabel htmlFor="controls-email">Email</FormLabel>
      <FormInput
        type="email"
        name="controls-email"
        defaultValue="jane@"
        required
        className="is-invalid"
        aria-invalid
        aria-describedby="controls-email-error"
      />
      <FormInvalidMessage id="controls-email-error">
        Enter an email address like jane@example.com.
      </FormInvalidMessage>
    </FormGroup>
  )
}