Checkbox
Usage
import { Checkbox } from "@ellie-ui/core";
export const Example = () => {
return (
<Checkbox defaultChecked />
)
}With Label
import { Checkbox } from "@ellie-ui/core";
export const Example = () => {
return (
<Checkbox defaultChecked>
<Checkbox.Label>서비스 약관에 동의합니다.</Checkbox.Label>
</Checkbox>
)
}Sizes
import { Checkbox } from "@ellie-ui/core";
export const Example = () => {
return (
<div className="flex flex-col items-center gap-3">
<Checkbox size="small" defaultChecked>
<Checkbox.Label>서비스 약관에 동의합니다.</Checkbox.Label>
</Checkbox>
<Checkbox size="medium" defaultChecked>
<Checkbox.Label>서비스 약관에 동의합니다.</Checkbox.Label>
</Checkbox>
<Checkbox size="large" defaultChecked>
<Checkbox.Label>서비스 약관에 동의합니다.</Checkbox.Label>
</Checkbox>
</div>
)
}Disabled
import { Checkbox } from "@ellie-ui/core";
export const Example = () => {
return (
<Checkbox defaultChecked disabled />
)
}Invalid
import { Checkbox } from "@ellie-ui/core";
export const Example = () => {
return (
<Checkbox defaultChecked invalid />
)
}Indeterminate
import { Checkbox } from "@ellie-ui/core";
export const Example = () => {
return (
<Checkbox checked="indeterminate" />
)
}Controlled
import { Checkbox } from "@ellie-ui/core";
import { useCheckbox } from "@ellie-ui/core/hooks";
export const Example = () => {
const checkbox = useCheckbox()
return (
<Checkbox
checked={checkbox.checked}
onCheckedChange={checkbox.onCheckedChange}
/>
)
}API
Checkbox Props
Prop
Type