Check mark
약관 혹은 동의 내용에 관하여 사용자의 읽음, 확인 등의 상태 여부를 표현하는 요소입니다.
CheckMark 는 기본적으로 테두리가 없는 체크 박스 형태의 컴포넌트입니다.
import { CheckMark } from '@montage-ui/core';
const Demo = () => {
return (
<CheckMark />
)
}
export default Demo;2가지 size를 제공합니다.
- small
- medium (default)
import { FlexBox, CheckMark, Label } from '@montage-ui/core';
const Demo = () => {
return (
<FlexBox gap="8px" flexDirection="column">
<FlexBox gap="8px">
<CheckMark size="small" id="small" />
<Label htmlFor="small">Small</Label>
</FlexBox>
<FlexBox gap="8px">
<CheckMark size="medium" id="medium" />
<Label htmlFor="medium">Medium</Label>
</FlexBox>
</FlexBox>
)
}
export default Demo;tight prop 을 사용하면 체크 박스의 좌우 여백을 조정할 수 있습니다.
import { CheckMark, FlexBox, Label } from '@montage-ui/core';
const Demo = () => {
return (
<FlexBox flexDirection="column" gap="8px">
<Label>Small</Label>
<FlexBox gap="8px" flexDirection="column">
<FlexBox gap="4px">
<CheckMark id="small-default" size="small" value="small-default" />
<Label htmlFor="small-default">Default</Label>
</FlexBox>
<FlexBox gap="6px">
<CheckMark id="small-tight" size="small" value="small-tight" tight />
<Label htmlFor="small-tight">Tight</Label>
</FlexBox>
</FlexBox>
<Label sx={{ marginTop: 8 }}>Medium</Label>
<FlexBox flexDirection="column" gap="8px">
<FlexBox gap="4px">
<CheckMark id="medium-default" size="medium" value="medium-default" />
<Label htmlFor="medium-default">Default</Label>
</FlexBox>
<FlexBox gap="6px">
<CheckMark id="medium-tight" size="medium" value="medium-tight" tight />
<Label htmlFor="medium-tight">Tight</Label>
</FlexBox>
</FlexBox>
</FlexBox>
)
}
export default Demo;Form과 관련된 컴포넌트와 함께 사용할 수 있습니다.
FormControlGroupFormControlFormControlFieldFormControlLabelFormControlMessageFormControlNegativeMessageFormControlPositiveMessageFormControlMessageAccessory
import { FlexBox, FormControl, FormControlField, FormControlLabel, FormControlMessage, CheckMark } from '@montage-ui/core';
const Demo = () => {
return (
<FlexBox flexDirection="column" gap="8px">
<FormControl>
<FlexBox flexDirection="row" gap="4px">
<FormControlField>
<CheckMark size="medium" />
</FormControlField>
<FormControlLabel>Label</FormControlLabel>
</FlexBox>
<FormControlMessage>Helper Message</FormControlMessage>
</FormControl>
</FlexBox>
)
}
export default Demo;icon props 을 사용해서 아이콘을 커스텀할 수 있습니다.
import { CheckMark } from '@montage-ui/core';
import { IconCircleCheckFill } from '@montage-ui/icon';
const Demo = () => {
return (
<CheckMark icon={<IconCircleCheckFill />} />
)
}
export default Demo;기본적으로 비제어 컴포넌트로 동작합니다.
checked, onCheckedChange prop 을 사용하면 제어 컴포넌트로 동작합니다.
제어 컴포넌트와 비제어 컴포넌트는 React 공식 문서 를 참조해주세요.
import { FlexBox, CheckMark } from '@montage-ui/core';
import { useState } from 'react';
const Demo = () => {
const [checked, setChecked] = useState(false);
return (
<FlexBox alignItems="center" flexDirection="column" gap="12px">
<CheckMark defaultChecked={false} />
<CheckMark checked={checked} onCheckedChange={setChecked} />
</FlexBox>
)
}
export default Demo;WAI-ARIA Checkbox Pattern 을 준수합니다.
- Form Control 와 함께 사용할 때 모든 접근성 속성을 주입할 수 있습니다.
- 그렇지 않은 경우에는 직접
aria-label등을 사용해서 접근성을 충족시켜야 합니다.
정해진 viewport에 따라 아래 옵션을 override 할 수 있습니다.
- size