Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Checkbox

Checkbox is a component used for allowing users to select multiple values from multiple options.

Source@yamada-ui/checkbox

Theming

The Checkbox is a multi part component.

export const Checkbox: ComponentMultiStyle<"Checkbox"> = {
baseStyle: {
container: {
_disabled: { cursor: "not-allowed" },
_readOnly: { cursor: "auto" },
},
icon: ({ colorScheme: c = "primary" }) => ({
border: "2px solid",
borderColor: "inherit",
color: ["white", "black"],
transitionDuration: "normal",
transitionProperty: "box-shadow",
_checked: {
bg: [`${c}.500`, `${c}.600`],
borderColor: [`${c}.500`, `${c}.600`],
color: ["white", "black"],
_hover: {
bg: [`${c}.600`, `${c}.700`],
borderColor: [`${c}.600`, `${c}.700`],
},
// eslint-disable-next-line perfectionist/sort-objects
_disabled: {
bg: ["blackAlpha.400", "whiteAlpha.300"],
borderColor: ["transparent", "transparent"],
},
_readOnly: {
bg: [`${c}.500`, `${c}.600`],
borderColor: [`${c}.500`, `${c}.600`],
},
},
_disabled: {
bg: ["blackAlpha.200", "whiteAlpha.100"],
borderColor: ["transparent", "transparent"],
},
_focusVisible: {
boxShadow: "outline",
},
_indeterminate: {
bg: [`${c}.500`, `${c}.600`],
borderColor: [`${c}.500`, `${c}.600`],
color: ["white", "black"],
},
_invalid: {
borderColor: ["danger.500", "danger.400"],
_focusVisible: {
borderColor: "inherit",
_checked: {
borderColor: [`${c}.500`, `${c}.600`],
},
},
},
}),
label: {
userSelect: "none",
_disabled: { opacity: 0.4 },
},
},
sizes: {
sm: {
icon: { boxSize: "3.5", fontSize: "2xs", rounded: "base" },
label: { fontSize: "sm" },
},
md: {
icon: { boxSize: "4", fontSize: "2xs", rounded: "base" },
label: { fontSize: "md" },
},
lg: {
icon: { boxSize: "5", fontSize: "sm", rounded: "base" },
label: { fontSize: "lg" },
},
},
defaultProps: {
colorScheme: "primary",
size: "md",
},
}
Copied!

Edit this page on GitHub

PreviousRadioCardNextCheckboxCard