Lorem ipsum dolor sit, amet consectetur adipisicing elit. At a eaque fugiat sint sapiente. Id, hic ex, blanditiis totam animi amet delectus temporibus quae fugiat magnam, quos eaque dolorum a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus labore unde minus temporibus beatae commodi et nesciunt iure in dignissimos suscipit, alias ab voluptatem facilis tempora numquam. Veritatis, dolorum suscipit! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo fugiat molestias iusto, ipsum distinctio officia ad id ratione esse ducimus architecto deleniti illum reiciendis rerum, at blanditiis molestiae. Cupiditate, nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, magni. Aliquid inventore quaerat nemo architecto harum earum quas porro repudiandae explicabo repellat repellendus magni, corporis omnis laborum, velit dicta blanditiis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, eveniet quas. Accusamus facere veritatis expedita delectus, asperiores numquam placeat necessitatibus assumenda, nesciunt in dolorem sit provident repellendus, voluptatem earum! Consequatur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut earum asperiores aliquam magnam est delectus veritatis numquam sint porro tenetur dolores nobis, deleniti voluptas quaerat, quia voluptatum soluta autem perspiciatis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis possimus eaque aliquam maxime? Quidem enim, sed itaque at veritatis nihil officia esse qui provident ipsa adipisci necessitatibus officiis distinctio laborum!
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{children}
);
};
```
{props.children}
);
};
```
아래 컨텐츠
{children}
);
};
```
{children}
);
};
```
graphemes.length: {graphemes.length}
value.length: {value.length}
graphemes: {JSON.stringify(graphemes)}
value: {value}
graphemes.length: {graphemes.length}
value.length: {value.length}
graphemes: {JSON.stringify(graphemes)}
value: {value}
`을 렌더링합니다. **`
`은 의미를 가진(semantic) 구분선이며, 스크린 리더 역시 해당 요소를 "수평(수직) 분할선"으로 읽습니다.** Divider가 의미를 가지지 않은 장식적 요소라면, `as` prop을 활용해 `
` 등으로 렌더링하여 스크린 리더가 해당 요소를 읽지 않도록 해야 합니다.
반대로, Divider를 `` 등 `
`이 아닌 요소로 렌더링해야 하는 상황에서, 스크린 리더가 해당 요소를 읽어야 한다면, `role="separator"`를 명시적으로 지정해야 합니다. ## Examples ### Orientation
```tsx
import { Box, Divider, HStack, VStack } from "@seed-design/react";
export default function DividerOrientation() {
return (
);
}
```
### Inset
```tsx
import { Box, Divider, HStack, VStack } from "@seed-design/react";
export default function DividerInset() {
return (
);
}
```
file: components/field-button.mdx
# Field Button
입력 필드 형태의 버튼으로, 선택창이나 피커를 열 때 사용합니다. 선택이 완료되면 버튼 라벨에 선택된 값이 표시됩니다.
***
title: Field Button
description: 입력 필드 형태의 버튼으로, 선택창이나 피커를 열 때 사용합니다. 선택이 완료되면 버튼 라벨에 선택된 값이 표시됩니다.
-------------------------------------------------------------------------------
```tsx
import { FieldButton } from "seed-design/ui/field-button";
export default function FieldButtonPreview() {
return (
window.alert("버튼 클릭됨"),
"aria-label": "알림 표시",
}}
/>
);
}
```
## Installation
npm
pnpm
yarn
bun
```bash
npx @seed-design/cli@latest add ui:field-button
```
```bash
pnpm dlx @seed-design/cli@latest add ui:field-button
```
```bash
yarn dlx @seed-design/cli@latest add ui:field-button
```
```bash
bun x @seed-design/cli@latest add ui:field-button
```
| undefined",
"default": undefined,
"required": false
},
disabled: {
"type": "boolean | undefined",
"default": "false",
"required": false
},
invalid: {
"type": "boolean | undefined",
"default": "false",
"required": false
},
readOnly: {
"type": "boolean | undefined",
"default": "false",
"required": false
},
name: {
"type": "string | undefined",
"default": undefined,
"required": false
},
values: {
"type": "string[] | undefined",
"default": undefined,
"required": false
},
onValuesChange: {
"type": "((values: string[]) => void) | undefined",
"default": undefined,
"required": false
},
asChild: {
"type": "boolean | undefined",
"default": "false",
"required": false,
description: "Whether the element should be rendered as a child of a slot."
}
}}
/>
### `FieldButtonValue`
`이 아닌 요소로 렌더링해야 하는 상황에서, 스크린 리더가 해당 요소를 읽어야 한다면, `role="separator"`를 명시적으로 지정해야 합니다. ## Examples ### Orientation