Input

import { Input } from '@fidely-ui/react'

export const InputBasics = () => {
  return <Input placeholder="Enter your name" />
}

import { Input, Stack } from '@fidely-ui/react'

export const InputSizes = () => {
  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

  return (
    <Stack gap={2}>
      {sizes.map((size) => (
        <Input placeholder="Enter email address..." size={size} key={size} />
      ))}
    </Stack>
  )
}

import { Input, Stack } from '@fidely-ui/react'

export const InputVariants = () => {
  const variants = ['subtle', 'flushed', 'outline'] as const

  return (
    <Stack gap={2}>
      {variants.map((variant) => (
        <Input placeholder="Enter email..." variant={variant} key={variant} />
      ))}
    </Stack>
  )
}

import { Field, Input } from '@fidely-ui/react'

export const InputHelperText = () => {
  return (
    <Field.Root required>
      <Field.Label>
        Comment <Field.RequiredIndicator />
      </Field.Label>
      <Input placeholder="Start typing..." variant="subtle" />
      <Field.HelperText>Additional text.</Field.HelperText>
    </Field.Root>
  )
}

import { Field, Input } from '@fidely-ui/react'

export const InputErrorText = () => {
  return (
    <Field.Root invalid>
      <Field.Label>
        Comment <Field.RequiredIndicator />
      </Field.Label>
      <Input placeholder="Start typing..." variant="subtle" />
      <Field.Error>Field is required</Field.Error>
    </Field.Root>
  )
}

import { Input } from '@fidely-ui/react'

export const InputDisabled = () => {
  return <Input disabled placeholder="disabled input" />
}

import { Input } from '@fidely-ui/react'

export const InputPlaceholder = () => {
  return (
    <Input
      color="orange.9"
      placeholder="custom placeholder"
      _placeholder={{ color: 'inherit' }}
    />
  )
}