Field Input

import { Field, FieldLabel, FieldDescription, FieldInput } from "@epilot/volt-ui"

<FieldSet className="flex flex-col w-96">
  <FieldGroup>
    <Field variant="highlight">
      <div className="flex items-center gap-2">
        <FieldLabel>Email address</FieldLabel>
        <FieldLabelContent>...</FieldLabelContent>
      </div>
      <FieldInput type="email" placeholder="tim@apple.com" />
      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>
    </Field>
  </FieldGroup>
  <FieldGroup>
    <Field variant="destructive">
      <div className="flex items-center gap-2">
        <FieldLabel>Password</FieldLabel>
        <FieldLabelContent>...</FieldLabelContent>
      </div>
      <FieldInput type="password" placeholder="********" />
      <FieldError>Password is required</FieldError>
    </Field>
  </FieldGroup>
</FieldSet>

import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from "@epilot/volt-ui"

<FieldGroup>
  <Field variant="highlight">
    <FieldLabel>Website</FieldLabel>
    <FieldInputGroup>
      <FieldGroupAddon align="start">https://</FieldGroupAddon>
      <FieldInput type="text" placeholder="example.com" />
    </FieldInputGroup>
  </Field>

  <Field variant="highlight">
    <FieldLabel>Price</FieldLabel>
    <FieldInputGroup>
      <FieldGroupAddon align="start">$</FieldGroupAddon>
      <FieldInput placeholder="10.00" />
    </FieldInputGroup>
  </Field>
</FieldGroup>