Select Box

명확한 테두리를 가진 컨테이너를 활용하여, 정의된 목록 중 하나 이상의 옵션을 선택하는 UI 요소입니다.

사용 가능 버전@seed-design/[email protected], @seed-design/[email protected]

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { HStack, VStack } from "@seed-design/lynx-react";
import {
  CheckSelectBox,
  CheckSelectBoxCheckmark,
  CheckSelectBoxGroup,
  RadioSelectBoxItem,
  RadioSelectBoxRadiomark,
  RadioSelectBoxRoot,
} from "@/components/ui/select-box";

export default function Example() {
  return (
    <HStack className="select-box-preview" gap="x6" align="flex-start">
      <VStack className="select-box-preview__column" grow shrink style={{ flexBasis: 0 }}>
        <CheckSelectBoxGroup accessibility-label="Fruit">
          <CheckSelectBox label="Apple" defaultChecked suffix={<CheckSelectBoxCheckmark />} />
          <CheckSelectBox
            label="Melon"
            description="Elit cupidatat dolore fugiat enim veniam culpa."
            suffix={<CheckSelectBoxCheckmark />}
          />
          <CheckSelectBox label="Mango" suffix={<CheckSelectBoxCheckmark />} />
        </CheckSelectBoxGroup>
      </VStack>

      <VStack className="select-box-preview__column" grow shrink style={{ flexBasis: 0 }}>
        <RadioSelectBoxRoot defaultValue="apple" accessibility-label="Fruit">
          <RadioSelectBoxItem value="apple" label="Apple" suffix={<RadioSelectBoxRadiomark />} />
          <RadioSelectBoxItem
            value="melon"
            label="Melon"
            description="Elit cupidatat dolore fugiat enim veniam culpa."
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem value="mango" label="Mango" suffix={<RadioSelectBoxRadiomark />} />
        </RadioSelectBoxRoot>
      </VStack>
    </HStack>
  );
}

Installation

npx @seed-design/cli@latest add ui:select-box

pnpm dlx @seed-design/cli@latest add ui:select-box

yarn dlx @seed-design/cli@latest add ui:select-box

bun x @seed-design/cli@latest add ui:select-box

의존성 설치

npm install @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react

yarn add @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react

pnpm add @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react

bun add @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react

아래 코드를 복사 후 붙여넣고 사용하세요

/**
 * @file ui:select-box
 * @requires @seed-design/lynx-react@^1.0.0
 * @requires @seed-design/lynx-css@^1.0.0
 * @requires @karrotmarket/lynx-monochrome-icon@>=1.20.0 <2.0.0
 **/

import IconCheckmarkFatFill from "@karrotmarket/lynx-monochrome-icon/IconCheckmarkFatFill";
import * as React from "@lynx-js/react";
import {
  CheckSelectBox as SeedCheckSelectBox,
  PrefixIcon,
  RadioGroup as SeedRadioGroup,
  RadioGroupField as SeedRadioGroupField,
  RadioSelectBox as SeedRadioSelectBox,
} from "@seed-design/lynx-react";
import type { LynxIconElementProps } from "@seed-design/lynx-react";

export interface RadioSelectBoxRootProps extends SeedRadioGroupField.RootProps {
  label?: React.ReactNode;
  /**
   * @default "medium"
   */
  labelWeight?: SeedRadioGroupField.LabelProps["weight"];
  indicator?: React.ReactNode;
  showRequiredIndicator?: boolean;

  description?: React.ReactNode;
  errorMessage?: React.ReactNode;

  /**
   * Number of columns in the grid layout.
   * @default 1
   */
  columns?: SeedRadioSelectBox.GroupProps["columns"];
}

/**
 * @see https://seed-design.io/lynx/components/select-box
 */
export const RadioSelectBoxRoot = React.forwardRef<unknown, RadioSelectBoxRootProps>(
  (
    {
      label,
      labelWeight,
      indicator,
      showRequiredIndicator,
      description,
      errorMessage,
      columns = 1,
      children,
      "accessibility-label": accessibilityLabel,
      ...props
    },
    ref,
  ) => {
    const renderHeader = label != null || indicator != null;
    const renderErrorMessage = props.invalid && errorMessage != null;
    const renderDescription = description != null && !renderErrorMessage;
    const renderFooter = renderDescription || renderErrorMessage;
    const defaultAccessibilityLabel = typeof label === "string" ? label : undefined;

    return (
      <SeedRadioGroupField.Root
        ref={ref}
        accessibility-label={accessibilityLabel ?? defaultAccessibilityLabel}
        {...props}
      >
        {renderHeader ? (
          <SeedRadioGroupField.Header>
            <SeedRadioGroupField.Label weight={labelWeight}>
              {label}
              {showRequiredIndicator ? <SeedRadioGroupField.RequiredIndicator /> : null}
              {indicator != null ? (
                <SeedRadioGroupField.IndicatorText>{indicator}</SeedRadioGroupField.IndicatorText>
              ) : null}
            </SeedRadioGroupField.Label>
          </SeedRadioGroupField.Header>
        ) : null}
        <SeedRadioSelectBox.Group columns={columns}>{children}</SeedRadioSelectBox.Group>
        {renderFooter ? (
          <SeedRadioGroupField.Footer>
            {renderDescription ? (
              <SeedRadioGroupField.Description>{description}</SeedRadioGroupField.Description>
            ) : null}
            {renderErrorMessage ? (
              <SeedRadioGroupField.ErrorMessage>{errorMessage}</SeedRadioGroupField.ErrorMessage>
            ) : null}
          </SeedRadioGroupField.Footer>
        ) : null}
      </SeedRadioGroupField.Root>
    );
  },
);
RadioSelectBoxRoot.displayName = "RadioSelectBoxRoot";

export interface RadioSelectBoxItemProps extends Omit<SeedRadioSelectBox.ItemProps, "children"> {
  label: React.ReactNode;
  description?: React.ReactNode;
  prefixIcon?: React.ReactElement<LynxIconElementProps>;
  suffix?: React.ReactNode;
  footer?: React.ReactNode;
}

export const RadioSelectBoxItem = React.forwardRef<unknown, RadioSelectBoxItemProps>(
  (
    {
      label,
      description,
      prefixIcon,
      suffix,
      footer,
      "accessibility-label": accessibilityLabel,
      ...otherProps
    },
    ref,
  ) => {
    return (
      <SeedRadioSelectBox.Item
        ref={ref}
        accessibility-label={accessibilityLabel ?? (typeof label === "string" ? label : undefined)}
        {...otherProps}
      >
        <SeedRadioSelectBox.Trigger>
          <SeedRadioSelectBox.Content>
            {prefixIcon ? <PrefixIcon icon={prefixIcon} /> : null}
            <SeedRadioSelectBox.Body>
              <SeedRadioSelectBox.Label>{label}</SeedRadioSelectBox.Label>
              {description != null ? (
                <SeedRadioSelectBox.Description>{description}</SeedRadioSelectBox.Description>
              ) : null}
            </SeedRadioSelectBox.Body>
          </SeedRadioSelectBox.Content>
          {suffix}
        </SeedRadioSelectBox.Trigger>
        {footer != null ? <SeedRadioSelectBox.Footer>{footer}</SeedRadioSelectBox.Footer> : null}
      </SeedRadioSelectBox.Item>
    );
  },
);
RadioSelectBoxItem.displayName = "RadioSelectBoxItem";

export interface RadioSelectBoxRadiomarkProps extends SeedRadioGroup.ItemControlProps {}

export const RadioSelectBoxRadiomark = React.forwardRef<unknown, RadioSelectBoxRadiomarkProps>(
  (props, ref) => {
    return (
      <SeedRadioGroup.ItemControl ref={ref} tone="neutral" {...props}>
        <SeedRadioGroup.ItemIndicator />
      </SeedRadioGroup.ItemControl>
    );
  },
);
RadioSelectBoxRadiomark.displayName = "RadioSelectBoxRadiomark";

export interface CheckSelectBoxGroupProps extends SeedCheckSelectBox.GroupProps {}

export const CheckSelectBoxGroup = SeedCheckSelectBox.Group;

export interface CheckSelectBoxProps extends Omit<SeedCheckSelectBox.RootProps, "children"> {
  label: React.ReactNode;
  description?: React.ReactNode;
  prefixIcon?: React.ReactElement<LynxIconElementProps>;
  suffix?: React.ReactNode;
  footer?: React.ReactNode;
}

/**
 * @see https://seed-design.io/lynx/components/select-box
 */
export const CheckSelectBox = React.forwardRef<unknown, CheckSelectBoxProps>(
  (
    {
      label,
      description,
      prefixIcon,
      suffix,
      footer,
      "accessibility-label": accessibilityLabel,
      ...otherProps
    },
    ref,
  ) => {
    return (
      <SeedCheckSelectBox.Root
        ref={ref}
        accessibility-label={accessibilityLabel ?? (typeof label === "string" ? label : undefined)}
        {...otherProps}
      >
        <SeedCheckSelectBox.Trigger>
          <SeedCheckSelectBox.Content>
            {prefixIcon ? <PrefixIcon icon={prefixIcon} /> : null}
            <SeedCheckSelectBox.Body>
              <SeedCheckSelectBox.Label>{label}</SeedCheckSelectBox.Label>
              {description != null ? (
                <SeedCheckSelectBox.Description>{description}</SeedCheckSelectBox.Description>
              ) : null}
            </SeedCheckSelectBox.Body>
          </SeedCheckSelectBox.Content>
          {suffix}
        </SeedCheckSelectBox.Trigger>
        {footer != null ? <SeedCheckSelectBox.Footer>{footer}</SeedCheckSelectBox.Footer> : null}
      </SeedCheckSelectBox.Root>
    );
  },
);
CheckSelectBox.displayName = "CheckSelectBox";

export interface CheckSelectBoxCheckmarkProps extends SeedCheckSelectBox.CheckmarkControlProps {}

export const CheckSelectBoxCheckmark = React.forwardRef<unknown, CheckSelectBoxCheckmarkProps>(
  (props, ref) => {
    return (
      <SeedCheckSelectBox.CheckmarkControl ref={ref} {...props}>
        <SeedCheckSelectBox.CheckmarkIcon icon={<IconCheckmarkFatFill />} />
      </SeedCheckSelectBox.CheckmarkControl>
    );
  },
);
CheckSelectBoxCheckmark.displayName = "CheckSelectBoxCheckmark";

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

Props

Check Select Box

`CheckSelectBoxGroup`

Prop

Type

`CheckSelectBox`

Prop

Type

labelReact.ReactNode

description?React.ReactNode

prefixIcon?React.ReactElement<LynxIconElementProps, string | React.JSXElementConstructor<any>> | undefined

suffix?React.ReactNode

footer?React.ReactNode

onCheckedChange?((checked: boolean) => void) | undefined

`CheckSelectBoxCheckmark`

고유 prop이 없습니다. className, style, children을 받습니다.

Radio Select Box

`RadioSelectBoxRoot`

Prop

Type

label?React.ReactNode

indicator?React.ReactNode

showRequiredIndicator?boolean | undefined

description?React.ReactNode

errorMessage?React.ReactNode

onValueChange?((value: string) => void) | undefined

RadioSelectBoxRoot는 label, description, errorMessage, invalid를 지원합니다. invalid가 true이고 errorMessage가 있으면 description 대신 오류 메시지를 표시합니다.

columns는 항목의 열 수를 지정합니다. className과 style은 그룹 바깥의 Root에 적용됩니다.

`RadioSelectBoxItem`

Prop

Type

labelReact.ReactNode

description?React.ReactNode

prefixIcon?React.ReactElement<LynxIconElementProps, string | React.JSXElementConstructor<any>> | undefined

suffix?React.ReactNode

footer?React.ReactNode

valuestring

`RadioSelectBoxRadiomark`

Prop

Type

Examples

Customizing Label

label prop에 여러 요소를 조합한 사용자 정의 콘텐츠를 전달할 수 있습니다.

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { HStack, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";
import {
  CheckSelectBox,
  CheckSelectBoxCheckmark,
  CheckSelectBoxGroup,
  RadioSelectBoxItem,
  RadioSelectBoxRadiomark,
  RadioSelectBoxRoot,
} from "@/components/ui/select-box";

function CustomizedLabel() {
  return (
    <>
      <text>Melon</text>
      <Badge tone="brand" variant="solid">
        New
      </Badge>
    </>
  );
}

export default function Example() {
  return (
    <HStack className="select-box-preview" gap="x8" align="flex-start">
      <VStack className="select-box-preview__column" grow shrink style={{ flexBasis: 0 }}>
        <CheckSelectBoxGroup accessibility-label="Fruit">
          <CheckSelectBox label="Apple" defaultChecked suffix={<CheckSelectBoxCheckmark />} />
          <CheckSelectBox
            accessibility-label="Melon New"
            label={<CustomizedLabel />}
            description="Elit cupidatat dolore fugiat enim veniam culpa."
            suffix={<CheckSelectBoxCheckmark />}
          />
          <CheckSelectBox
            label="Mango"
            description="Aliqua ad aute eiusmod eiusmod nulla adipisicing proident ullamco in."
            suffix={<CheckSelectBoxCheckmark />}
          />
        </CheckSelectBoxGroup>
      </VStack>

      <VStack className="select-box-preview__column" grow shrink style={{ flexBasis: 0 }}>
        <RadioSelectBoxRoot defaultValue="apple" accessibility-label="Fruit">
          <RadioSelectBoxItem value="apple" label="Apple" suffix={<RadioSelectBoxRadiomark />} />
          <RadioSelectBoxItem
            value="melon"
            accessibility-label="Melon New"
            label={<CustomizedLabel />}
            description="Elit cupidatat dolore fugiat enim veniam culpa."
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem
            value="mango"
            label="Mango"
            description="Aliqua ad aute eiusmod eiusmod nulla adipisicing proident ullamco in."
            suffix={<RadioSelectBoxRadiomark />}
          />
        </RadioSelectBoxRoot>
      </VStack>
    </HStack>
  );
}

Listening to Value Changes

CheckSelectBox는 onCheckedChange를 사용하여 체크박스의 선택 상태 변경을 감지할 수 있습니다.

RadioSelectBoxRoot는 onValueChange를 사용하여 라디오 버튼의 선택 값 변경을 감지할 수 있습니다.

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { useState } from "@lynx-js/react";
import { HStack, VStack } from "@seed-design/lynx-react";
import {
  CheckSelectBox,
  CheckSelectBoxCheckmark,
  CheckSelectBoxGroup,
  RadioSelectBoxItem,
  RadioSelectBoxRadiomark,
  RadioSelectBoxRoot,
} from "@/components/ui/select-box";

export default function Example() {
  const [checkCount, setCheckCount] = useState(0);
  const [checkLastValue, setCheckLastValue] = useState<boolean | null>(null);
  const [radioCount, setRadioCount] = useState(0);
  const [radioLastValue, setRadioLastValue] = useState<string | null>(null);

  return (
    <HStack className="select-box-preview" gap="x8" align="center">
      <VStack
        className="select-box-preview__column"
        gap="x4"
        align="center"
        grow
        shrink
        style={{ flexBasis: 0 }}
      >
        <CheckSelectBoxGroup accessibility-label="Fruit">
          <CheckSelectBox
            label="Apple"
            suffix={<CheckSelectBoxCheckmark />}
            onCheckedChange={(checked) => {
              setCheckCount((previous) => previous + 1);
              setCheckLastValue(checked);
            }}
          />
        </CheckSelectBoxGroup>
        <text className="select-box-preview__status">
          onCheckedChange called: {checkCount} times, last value:{" "}
          {checkLastValue === null ? "-" : JSON.stringify(checkLastValue)}
        </text>
      </VStack>

      <VStack
        className="select-box-preview__column"
        gap="x4"
        align="center"
        grow
        shrink
        style={{ flexBasis: 0 }}
      >
        <RadioSelectBoxRoot
          defaultValue="apple"
          accessibility-label="Fruit"
          onValueChange={(value) => {
            setRadioCount((previous) => previous + 1);
            setRadioLastValue(value);
          }}
        >
          <RadioSelectBoxItem value="apple" label="Apple" suffix={<RadioSelectBoxRadiomark />} />
          <RadioSelectBoxItem value="banana" label="Banana" suffix={<RadioSelectBoxRadiomark />} />
        </RadioSelectBoxRoot>
        <text className="select-box-preview__status">
          onValueChange called: {radioCount} times, last value: {radioLastValue ?? "-"}
        </text>
      </VStack>
    </HStack>
  );
}

Grid Layout (Columns)

columns prop을 사용하여 여러 열로 배치할 수 있습니다. columns가 1보다 크면 하위 요소의 layout이 자동으로 "vertical"로 설정됩니다.

가로형(layout="horizontal")은 단일 컬럼으로 배치합니다. 여러 열로 구성한 그룹에서 개별 항목을 가로형으로 바꾸려면, 아래 예제처럼 래퍼가 모든 열을 차지하도록 gridColumnStart와 gridColumnEnd를 지정해 전체 너비를 확보하세요.

래퍼는 HStack align="stretch"로 구성해 내부 Select Box가 grid 행 높이를 채우도록 합니다.

Lynx 예제를 불러오는 중입니다.

import "./styles";

import IconDiamond from "@karrotmarket/lynx-multicolor-icon/IconDiamond";
import IconIcecreamcone from "@karrotmarket/lynx-multicolor-icon/IconIcecreamcone";

import { HStack, VStack } from "@seed-design/lynx-react";
import {
  CheckSelectBox,
  CheckSelectBoxCheckmark,
  CheckSelectBoxGroup,
  RadioSelectBoxItem,
  RadioSelectBoxRadiomark,
  RadioSelectBoxRoot,
} from "@/components/ui/select-box";

export default function Example() {
  return (
    <VStack className="select-box-preview" gap="x8">
      <CheckSelectBoxGroup columns={2} accessibility-label="Grid 레이아웃 예제">
        <CheckSelectBox
          prefixIcon={<IconIcecreamcone />}
          label="옵션 1"
          description="layout=vertical"
          suffix={<CheckSelectBoxCheckmark />}
        />
        <CheckSelectBox
          prefixIcon={<IconIcecreamcone />}
          label="옵션 2"
          description="layout=vertical"
          suffix={<CheckSelectBoxCheckmark />}
        />
        <HStack align="stretch" style={{ gridColumnStart: "1", gridColumnEnd: "3" }}>
          <CheckSelectBox
            prefixIcon={<IconIcecreamcone />}
            defaultChecked
            layout="horizontal"
            label="layout=horizontal"
            description="layout을 horizontal로 오버라이드"
            suffix={<CheckSelectBoxCheckmark />}
          />
        </HStack>
        <CheckSelectBox
          prefixIcon={<IconIcecreamcone />}
          label="옵션 4"
          description="layout=vertical"
          suffix={<CheckSelectBoxCheckmark />}
        />
      </CheckSelectBoxGroup>

      <RadioSelectBoxRoot
        columns={3}
        defaultValue="option3"
        accessibility-label="Grid 레이아웃 예제"
      >
        <RadioSelectBoxItem
          value="option1"
          prefixIcon={<IconDiamond />}
          label="옵션 1"
          suffix={<RadioSelectBoxRadiomark />}
        />
        <RadioSelectBoxItem
          value="option2"
          prefixIcon={<IconDiamond />}
          label="옵션 2"
          suffix={<RadioSelectBoxRadiomark />}
        />
        <HStack align="stretch" style={{ gridColumnStart: "1", gridColumnEnd: "4" }}>
          <RadioSelectBoxItem
            value="option3"
            prefixIcon={<IconDiamond />}
            label="layout=horizontal"
            description="layout을 horizontal로 오버라이드"
            layout="horizontal"
            suffix={<RadioSelectBoxRadiomark />}
          />
        </HStack>
        <RadioSelectBoxItem
          value="option4"
          prefixIcon={<IconDiamond />}
          label="옵션 4"
          suffix={<RadioSelectBoxRadiomark />}
        />
        <RadioSelectBoxItem
          value="option5"
          prefixIcon={<IconDiamond />}
          label="옵션 5"
          suffix={<RadioSelectBoxRadiomark />}
        />
        <RadioSelectBoxItem
          value="option6"
          prefixIcon={<IconDiamond />}
          label="옵션 6"
          suffix={<RadioSelectBoxRadiomark />}
        />
      </RadioSelectBoxRoot>
    </VStack>
  );
}

With Suffix

suffix prop을 사용하여 체크마크, 라디오 마크, 또는 커스텀 요소를 표시할 수 있습니다. CheckSelectBoxCheckmark와 RadioSelectBoxRadiomark를 사용하거나, 아이콘이나 텍스트 등 자유로운 요소를 전달할 수 있습니다.

Lynx 예제를 불러오는 중입니다.

import "./styles";

import IconPersonCircleLine from "@karrotmarket/lynx-monochrome-icon/IconPersonCircleLine";

import { HStack, VStack } from "@seed-design/lynx-react";
import {
  CheckSelectBox,
  CheckSelectBoxCheckmark,
  CheckSelectBoxGroup,
  RadioSelectBoxItem,
  RadioSelectBoxRadiomark,
  RadioSelectBoxRoot,
} from "@/components/ui/select-box";

export default function Example() {
  return (
    <HStack className="select-box-preview" gap="x8" align="flex-start">
      <VStack className="select-box-preview__column" grow shrink style={{ flexBasis: 0 }}>
        <CheckSelectBoxGroup accessibility-label="Suffix 예제">
          <CheckSelectBox label="체크마크" suffix={<CheckSelectBoxCheckmark />} />
          <CheckSelectBox
            label="텍스트 suffix"
            suffix={<text className="select-box-preview__suffix">+1,000원</text>}
          />
          <CheckSelectBox
            label="suffix 없음"
            description="Commodo aliquip fugiat aute irure."
            prefixIcon={<IconPersonCircleLine />}
          />
        </CheckSelectBoxGroup>
      </VStack>

      <VStack className="select-box-preview__column" grow shrink style={{ flexBasis: 0 }}>
        <RadioSelectBoxRoot defaultValue="radiomark" accessibility-label="Radiomark 예제">
          <RadioSelectBoxItem
            value="radiomark"
            label="라디오 마크"
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem
            value="text"
            label="텍스트 suffix"
            description="Commodo aliquip fugiat aute irure."
            suffix={<text className="select-box-preview__suffix">+1,000원</text>}
          />
          <RadioSelectBoxItem
            value="none"
            label="suffix 없음"
            prefixIcon={<IconPersonCircleLine />}
          />
        </RadioSelectBoxRoot>
      </VStack>
    </HStack>
  );
}

footer prop으로 추가 콘텐츠를 표시할 수 있습니다. footerVisibility prop으로 footer의 표시 조건을 제어할 수 있습니다.

"when-selected" (기본값): 항목이 선택되었을 때만 표시
"when-not-selected": 항목이 선택되지 않았을 때만 표시
"always": 항상 표시

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { HStack, VStack } from "@seed-design/lynx-react";
import {
  CheckSelectBox,
  CheckSelectBoxCheckmark,
  CheckSelectBoxGroup,
  RadioSelectBoxItem,
  RadioSelectBoxRadiomark,
  RadioSelectBoxRoot,
} from "@/components/ui/select-box";

export default function Example() {
  return (
    <HStack className="select-box-preview" gap="x8" align="flex-start">
      <VStack className="select-box-preview__column" grow shrink style={{ flexBasis: 0 }}>
        <CheckSelectBoxGroup accessibility-label="Footer 예제">
          <CheckSelectBox
            label="선택 시에만 표시 (기본값)"
            description="footerVisibility='when-selected'"
            suffix={<CheckSelectBoxCheckmark />}
            footer={<text className="select-box-preview__footer">선택되었을 때만 보입니다.</text>}
          />
          <CheckSelectBox
            label="항상 표시"
            description="footerVisibility='always'"
            suffix={<CheckSelectBoxCheckmark />}
            footerVisibility="always"
            footer={<text className="select-box-preview__footer">항상 보입니다.</text>}
          />
          <CheckSelectBox
            label="미선택 시에만 표시"
            description="footerVisibility='when-not-selected'"
            suffix={<CheckSelectBoxCheckmark />}
            footerVisibility="when-not-selected"
            footer={
              <text className="select-box-preview__footer">선택되지 않았을 때만 보입니다.</text>
            }
          />
        </CheckSelectBoxGroup>
      </VStack>

      <VStack className="select-box-preview__column" grow shrink style={{ flexBasis: 0 }}>
        <RadioSelectBoxRoot defaultValue="when-selected" accessibility-label="Footer 예제">
          <RadioSelectBoxItem
            value="when-selected"
            label="선택 시에만 표시 (기본값)"
            description="footerVisibility='when-selected'"
            suffix={<RadioSelectBoxRadiomark />}
            footer={<text className="select-box-preview__footer">선택되었을 때만 보입니다.</text>}
          />
          <RadioSelectBoxItem
            value="always"
            label="항상 표시"
            description="footerVisibility='always'"
            suffix={<RadioSelectBoxRadiomark />}
            footerVisibility="always"
            footer={<text className="select-box-preview__footer">항상 보입니다.</text>}
          />
          <RadioSelectBoxItem
            value="when-not-selected"
            label="미선택 시에만 표시"
            description="footerVisibility='when-not-selected'"
            suffix={<RadioSelectBoxRadiomark />}
            footerVisibility="when-not-selected"
            footer={
              <text className="select-box-preview__footer">선택되지 않았을 때만 보입니다.</text>
            }
          />
        </RadioSelectBoxRoot>
      </VStack>
    </HStack>
  );
}

웹 버전과의 차이

Lynx에는 native form 제출 모델이 없어 React Hook Form, hidden input, name, required를 제공하지 않습니다. 선택 값과 오류 상태를 앱에서 관리하세요.
라디오 그룹은 label, description, error message를 지원합니다. 체크박스 그룹은 React Registry의 Fieldset 연동을 제공하지 않습니다.
브라우저 키보드 focus 대신 native tap과 접근성 탐색을 사용합니다.
각 항목은 독립된 접근성 요소입니다. raw <text>를 포함하거나 텍스트가 없는 항목에는 accessibility-label을 지정하세요.

Select Box

Installation

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

Props

Check Select Box

`CheckSelectBoxGroup`

`CheckSelectBox`

`CheckSelectBoxCheckmark`

Radio Select Box

`RadioSelectBoxRoot`

`RadioSelectBoxItem`

`RadioSelectBoxRadiomark`

Examples

Customizing Label

Listening to Value Changes

Grid Layout (Columns)

With Suffix

Collapsible Footer

웹 버전과의 차이

목차

Select Box

Manual Installation

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

목차