Input

import { Input } from "@chakra-ui/react"

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

import { Input, Stack } from "@chakra-ui/react"

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

import { Input, Stack } from "@chakra-ui/react"

const Demo = () => {
  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>
  )
}

import { Input } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"

const Demo = () => {
  return (
    <Field label="Email" required helperText="We'll never share your email.">
      <Input placeholder="Enter your email" />
    </Field>
  )
}

import { Input } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"

const Demo = () => {
  return (
    <Field invalid label="Email" errorText="This field is required">
      <Input placeholder="Enter your email" />
    </Field>
  )
}

import { HStack, Input } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"

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

"use client"

import { Button, Input, Stack } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
import { useForm } from "react-hook-form"

interface FormValues {
  firstName: string
  lastName: string
}

const Demo = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>()

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Stack gap="4" align="flex-start" maxW="sm">
        <Field
          label="First name"
          invalid={!!errors.firstName}
          errorText={errors.firstName?.message}
        >
          <Input
            {...register("firstName", { required: "First name is required" })}
          />
        </Field>
        <Field
          label="Last name"
          invalid={!!errors.lastName}
          errorText={errors.lastName?.message}
        >
          <Input
            {...register("lastName", { required: "Last name is required" })}
          />
        </Field>
        <Button type="submit">Submit</Button>
      </Stack>
    </form>
  )
}

import { HStack, Input } from "@chakra-ui/react"
import { InputGroup } from "@/components/ui/input-group"
import { LuUser } from "react-icons/lu"

const Demo = () => {
  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, Input, Kbd } from "@chakra-ui/react"
import { InputGroup } from "@/components/ui/input-group"
import {
  NativeSelectField,
  NativeSelectRoot,
} from "@/components/ui/native-select"
import { LuSearch } from "react-icons/lu"

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

const Demo = () => {
  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>
  )
}

import { Group, Input, InputAddon, Stack } from "@chakra-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>
)

import { Input } from "@chakra-ui/react"

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

import { Input } from "@chakra-ui/react"

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

import { Box, Field, Input, defineStyle } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Field.Root>
      <Box pos="relative" w="full">
        <Input className="peer" placeholder="" />
        <Field.Label css={floatingStyles}>Email</Field.Label>
      </Box>
    </Field.Root>
  )
}

const floatingStyles = defineStyle({
  pos: "absolute",
  bg: "bg",
  px: "0.5",
  top: "-3",
  insetStart: "2",
  fontWeight: "normal",
  pointerEvents: "none",
  transition: "position",
  _peerPlaceholderShown: {
    color: "fg.muted",
    top: "2.5",
    insetStart: "3",
  },
  _peerFocusVisible: {
    color: "fg",
    top: "-3",
    insetStart: "2",
  },
})

"use client"

import { Input } from "@chakra-ui/react"
import { withMask } from "use-mask-input"

const Demo = () => {
  return (
    <Input placeholder="(99) 99999-9999" ref={withMask("(99) 99999-9999")} />
  )
}