Input

import { Input } from "@ellie-ui/core";

export const Example = () => {
  return (
    <Input placeholder="텍스트를 입력해주세요" />
  )
}

import { Input } from "@ellie-ui/core";

export const Example = () => {
  return (
    <Input placeholder="텍스트를 입력해주세요" disabled />
  )
}

import { Input } from "@ellie-ui/core";

export const Example = () => {
  return (
    <Input defaultValue="nononcrust@gmail.com" readOnly />
  )
}

import { Input } from "@ellie-ui/core";

export const Example = () => {
  return (
    <Input placeholder="텍스트를 입력해주세요" invalid />
  )
}

import { Input } from "@ellie-ui/core";
import { useInput } from "@ellie-ui/core/hooks";

export const Example = () => {
  const input = useInput()

  return (
    <Input
      value={input.value}
      onChange={input.onChange}
      placeholder="텍스트를 입력해주세요"
    />
  )
}

import { Button, Form, Input } from "@ellie-ui/core";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

type EmailForm = z.infer<typeof EmailForm>;
const EmailForm = z.object({
  email: z.email({ message: "올바른 이메일 형식을 입력해주세요" })
})

export const Example = () => {
  const form = useForm<EmailForm>({
    resolver: zodResolver(EmailForm),
    defaultValues: {
      email: "",
    },
  })

  const onSubmit = form.handleSubmit(() => {})

  return (
  <Form onSubmit={onSubmit}>
    <Controller
      name="email"
      control={form.control}
      render={({ field, fieldState }) => (
        <Form.Field invalid={fieldState.invalid}>
          <Form.Label>이메일</Form.Label>
          <Form.Control>
            <Input {...field} placeholder="이메일을 입력해주세요" />
          </Form.Control>
          <Form.Description>이메일을 입력해주세요</Form.Description>
          <Form.ErrorMessage>{fieldState.error?.message}</Form.ErrorMessage>
        </Form.Field>
      )}
    />
    <Button className="mt-4" type="submit">
      제출하기
    </Button>
  </Form>
  )
}