File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-14
08-18
08-18
08-18
File name
Commit message
Commit date
"use client";
import type { ComponentPropsWithRef } from "react";
import { cx } from "../../utils";
/**
* 필수·선택 표시. 둘은 배타적이라 boolean 두 개가 아니라 하나의 값으로 받는다 — 그래야
* "필수이면서 선택"이라는 있을 수 없는 조합이 타입에서 막힌다.
*/
export type FoxFormLabelRequirement = "required" | "optional";
/**
* 네이티브 `<label>`이 받는 것을 그대로 넘겨받는다 — htmlFor·id·title 등. 이름이 겹치는
* 것만 걷어내고 아래에서 다시 정의한다.
*/
type NativeLabelProps = Omit<ComponentPropsWithRef<"label">, "className" | "hidden">;
export interface FoxFormLabelProps extends NativeLabelProps {
/**
* 그릴 태그. 칸 하나를 가리킬 때는 `label`이고, 칸 여러 개를 묶은 필드
* (전화번호·주소처럼)에서는 `span`이다 — 가리킬 대상이 하나가 아니라 `htmlFor`를 쓸 수
* 없고, 아무것도 가리키지 않는 `<label>`을 두면 의미가 어긋난다. 그때 이름 연결은
* 감싼 쪽이 `aria-labelledby`로 한다.
*/
as?: "label" | "span";
requirement?: FoxFormLabelRequirement;
/** "(선택)" 대신 쓸 문구. */
optionalText?: string;
/** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
hidden?: boolean;
/** 배치 조정용. */
className?: string;
}
/**
* @fox 입력 칸 위에 붙는 라벨. 상태를 갖지 않는다.
*
* 필수는 글자 뒤에 `*`, 선택은 "(선택)"을 붙인다. `*`는 `aria-hidden`이라 스크린리더가 읽지
* 않는다 — 필수 여부는 입력 요소의 `required`가 알리는 것이고 별표는 그 눈에 보이는 짝이라,
* 둘 다 읽히면 같은 말이 두 번 나온다. 반대로 "(선택)"은 대신 알려 줄 속성이 없어 읽히게 둔다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxFormLabel({
as: Tag = "label",
requirement,
optionalText = "(선택)",
hidden = false,
className,
children,
...rest
}: FoxFormLabelProps) {
if (hidden) {
return null;
}
return (
<Tag {...rest} className={cx("fox-form-label", className)}>
{children}
{requirement === "required" ? (
<span className="fox-form-label__required" aria-hidden="true">
*
</span>
) : null}
{requirement === "optional" ? (
<span className="fox-form-label__optional">{optionalText}</span>
) : null}
</Tag>
);
}