Text Field Textarea

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  return (
    <VStack width="full" maxWidth="480px">
      <TextField label="라벨">
        <TextFieldTextarea accessibility-label="라벨" />
      </TextField>
    </VStack>
  );
}

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  return (
    <VStack width="full" maxWidth="480px" gap="x5">
      <TextField label="라벨" description="설명을 써주세요">
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
      <TextField
        label="라벨"
        description="설명을 써주세요"
        invalid
        errorMessage="오류가 발생한 이유를 써주세요"
      >
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
    </VStack>
  );
}

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  return (
    <VStack width="full" maxWidth="480px" gap="x5">
      <TextField label="라벨" description="설명을 써주세요" disabled>
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
      <TextField
        label="라벨"
        description="설명을 써주세요"
        disabled
        invalid
        errorMessage="오류가 발생한 이유를 써주세요"
      >
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
    </VStack>
  );
}

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  return (
    <VStack width="full" maxWidth="480px" gap="x5">
      <TextField label="라벨" description="설명을 써주세요" readOnly>
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
      <TextField
        label="라벨"
        description="설명을 써주세요"
        readOnly
        invalid
        errorMessage="오류가 발생한 이유를 써주세요"
      >
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
    </VStack>
  );
}

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  return (
    <VStack width="full" maxWidth="480px" gap="spacingY.componentDefault">
      <TextField label="라벨" description="size=large (default)" size="large">
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
      <TextField label="라벨" description="size=medium" size="medium">
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
      <TextField variant="underline" description="size=large (default)" size="large">
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
      <TextField variant="underline" description="size=medium" size="medium">
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
    </VStack>
  );
}

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  return (
    <VStack width="full" maxWidth="480px">
      <TextField label="라벨" description="설명을 써주세요">
        <TextFieldTextarea
          accessibility-label="라벨"
          placeholder="플레이스홀더"
          autoresize={false}
          style={{ height: "250px" }}
        />
      </TextField>
    </VStack>
  );
}

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  return (
    <VStack width="full" maxWidth="480px">
      <TextField label="라벨" description="설명을 써주세요">
        <TextFieldTextarea
          accessibility-label="라벨"
          placeholder="플레이스홀더"
          style={{ minHeight: "200px", maxHeight: "300px" }}
        />
      </TextField>
    </VStack>
  );
}

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  return (
    <VStack width="full" maxWidth="480px" gap="spacingY.componentDefault">
      <TextField
        label="선택 필드"
        labelWeight="bold"
        description="설명을 써주세요"
        indicator="선택"
      >
        <TextFieldTextarea accessibility-label="선택 필드" placeholder="플레이스홀더" />
      </TextField>
      <TextField label="필수 필드" description="설명을 써주세요" required>
        <TextFieldTextarea accessibility-label="필수 필드" placeholder="플레이스홀더" />
      </TextField>
      <TextField label="필수 필드" description="설명을 써주세요" required showRequiredIndicator>
        <TextFieldTextarea accessibility-label="필수 필드" placeholder="플레이스홀더" />
      </TextField>
    </VStack>
  );
}

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  return (
    <VStack width="full" maxWidth="480px" gap="x3">
      <TextField label="라벨" description="설명을 써주세요" maxGraphemeCount={8}>
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
    </VStack>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  const [value, setValue] = useState("");
  const [graphemes, setGraphemes] = useState<string[]>([]);

  return (
    <VStack width="full" maxWidth="480px" gap="x4">
      <TextField
        label="라벨"
        description="국기 이모지 🇰🇷 를 추가해보세요."
        maxGraphemeCount={100}
        value={value}
        onValueChange={({ slicedValue, slicedGraphemes }) => {
          setValue(slicedValue);
          setGraphemes(slicedGraphemes);
        }}
      >
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
      <VStack gap="x2">
        <text className="text-field-textarea-preview__status">
          graphemes.length: {JSON.stringify(graphemes.length)}
        </text>
        <text className="text-field-textarea-preview__status">
          value.length: {JSON.stringify(value.length)}
        </text>
        <text className="text-field-textarea-preview__status">
          graphemes: {JSON.stringify(graphemes)}
        </text>
        <text className="text-field-textarea-preview__status">value: {value}</text>
      </VStack>
    </VStack>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  const [value, setValue] = useState("안녕하세요");

  return (
    <VStack width="full" maxWidth="480px" gap="x3">
      <TextField
        label="자기소개"
        description="입력값을 React state로 관리합니다."
        value={value}
        onValueChange={({ value: nextValue }) => setValue(nextValue)}
      >
        <TextFieldTextarea accessibility-label="자기소개" placeholder="저는…" />
      </TextField>
      <text className="text-field-textarea-preview__status">입력값: {value}</text>
    </VStack>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  const [value, setValue] = useState("");

  return (
    <VStack width="full" maxWidth="480px">
      <TextField
        label="레이블"
        description="공백을 입력할 수 없어요"
        value={value}
        onValueChange={({ value: nextValue }) => setValue(nextValue.replace(/ /g, ""))}
      >
        <TextFieldTextarea accessibility-label="레이블" placeholder="공백을 입력해보세요" />
      </TextField>
    </VStack>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { VStack } from "@seed-design/lynx-react";
import { TextField, TextFieldTextarea } from "@/components/ui/text-field";

export default function Example() {
  const [value, setValue] = useState("");

  return (
    <VStack width="full" maxWidth="480px">
      <TextField
        label="라벨"
        description="6글자까지 입력 가능합니다"
        maxGraphemeCount={6}
        value={value}
        onValueChange={({ slicedValue }) => setValue(slicedValue)}
      >
        <TextFieldTextarea accessibility-label="라벨" placeholder="플레이스홀더" />
      </TextField>
    </VStack>
  );
}