Input

'use client'

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

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

'use client'

import { Stack } from '@chakra-ui/react'
import { Input } from '@saas-ui/react'

export const InputWithVariants = () => {
  return (
    <Stack gap="4">
      <Input placeholder="Subtle" variant="subtle" />
      <Input placeholder="Outline" variant="outline" />
      <Input placeholder="Flushed" variant="flushed" />
    </Stack>
  )
}

'use client'

import { Stack } from '@chakra-ui/react'
import { Input } from '@saas-ui/react'

export const InputWithSizes = () => {
  return (
    <Stack gap="4">
      <Input placeholder="size (xs)" size="xs" />
      <Input placeholder="size (sm)" size="sm" />
      <Input placeholder="size (md)" size="md" />
      <Input placeholder="size (lg)" size="lg" />
    </Stack>
  )
}

'use client'

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

export const InputWithHelperText = () => {
  return (
    <Field.Root required>
      <Field.Label>Email</Field.Label>
      <Input placeholder="Enter your email" />
      <Field.HelperText>We'll never share your email.</Field.HelperText>
    </Field.Root>
  )
}

'use client'

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

export const InputWithErrorText = () => {
  return (
    <Field.Root invalid>
      <Field.Label>Email</Field.Label>
      <Input placeholder="Enter your email" />
      <Field.ErrorText>This field is required</Field.ErrorText>
    </Field.Root>
  )
}

'use client'

import { HStack } from '@chakra-ui/react'
import { Field, Input } from '@saas-ui/react'

export const InputWithField = () => {
  return (
    <HStack gap="10" width="full">
      <Field.Root required>
        <Field.Label>Email</Field.Label>
        <Input placeholder="me@example.com" variant="subtle" />
      </Field.Root>
    </HStack>
  )
}

import { HStack } from '@chakra-ui/react'
import { Input, InputGroup } from '@saas-ui/react'
import { LuUser } from 'react-icons/lu'

export const InputWithLeftElement = () => {
  return (
    <HStack gap="10" width="full">
      <InputGroup flex="1" startElement={<LuUser />}>
        <Input placeholder="Username" />
      </InputGroup>

      <InputGroup flex="1" startElement="https://">
        <Input ps="4.75em" placeholder="yoursite.com" />
      </InputGroup>
    </HStack>
  )
}

import { HStack, Kbd } from '@chakra-ui/react'
import { Input, InputGroup, NativeSelect } from '@saas-ui/react'
import { LuSearch } from 'react-icons/lu'

const DomainSelect = () => (
  <NativeSelect size="xs" variant="plain" width="auto" me="-1">
    <option value=".com">.com</option>
    <option value=".org">.org</option>
    <option value=".net">.net</option>
  </NativeSelect>
)

export const InputWithLeftAndRightElement = () => {
  return (
    <HStack gap="10" width="full">
      <InputGroup
        flex="1"
        startElement={<LuSearch />}
        endElement={<Kbd>⌘K</Kbd>}
      >
        <Input placeholder="Search contacts" />
      </InputGroup>

      <InputGroup
        flex="1"
        startElement="https://"
        endElement={<DomainSelect />}
      >
        <Input ps="4.75em" pe="0" placeholder="yoursite.com" />
      </InputGroup>
    </HStack>
  )
}

'use client'

import { Group, Stack } from '@chakra-ui/react'
import { Input, InputAddon } from '@saas-ui/react'

export const InputWithAddon = () => (
  <Stack gap="10">
    <Group attached>
      <InputAddon>https://</InputAddon>
      <Input placeholder="Phone number..." />
    </Group>

    <Group attached>
      <Input placeholder="Placeholder" />
      <InputAddon>.com</InputAddon>
    </Group>
  </Stack>
)

'use client'

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

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

'use client'

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

export const InputWithPlaceholderStyle = () => {
  return (
    <Input
      color="teal"
      placeholder="custom placeholder"
      _placeholder={{ color: 'inherit' }}
    />
  )
}