# Function Toggle

- Toggle(
  props: Partial<
  Pick<
  Omit<
  Omit<
  DetailedHTMLProps<
  LabelHTMLAttributes<HTMLLabelElement>,
  HTMLLabelElement,
  >,
  "ref",
  > & {
  ref?:
  | null
  | (instance: null | HTMLLabelElement) => void
  | RefObject<HTMLLabelElement>;
  },
  "css"
  | "disabled",
  > & TransformProps<{ disabled?: boolean | "true" }, {}> & {
  css?: CSS<
  {},
  {
  colors: {
  activeBg: "#e7e7e7";
  background: "white";
  blue1: "#038bf4";
  blue2: "#b7d6f5";
  blue3: "#dbe6ff";
  blue4: "#33b4ff";
  blue5: "#30a2e6";
  border: "#d5d5d5";
  buttonBorder: "#bababa";
  choiceActiveBg: "#f3f3f3";
  choiceActiveText: "#313131";
  choiceBg: "#ffffff";
  choiceBorder: "#cfcfcf";
  choiceText: "#999999";
  focusColor: "#dcaf00";
  green1: "#3ec234";
  green1Darker: "#38af2f";
  grey1: "#737373";
  headerBg: "#efeff0";
  headerBorder: "#c8c8c9";
  headerText: "#484848";
  icon: "#636363";
  inactiveBg: "#d3d3de";
  inactiveDarkBg: "#999";
  inputDisabledBg: "#f3f3f3";
  inputDisabledText: "#959595";
  mainColor: "#008ad2";
  mainColorAlt: "#006AA9";
  modalBg: "#f7f7f7";
  modalButtonBg: "#f8f8f8";
  modalButtonBorder: "#c2c2c2";
  orange1: "#ff7200";
  orange1Darker: "#cc5b00";
  pink1: "#ff388f";
  pinky1: "#f5c0b7";
  pinky2: "#e07b67";
  pinky3: "#ffe1db";
  popText: "#666";
  purple1: "#7357e8";
  red1: "#ea2700";
  scrollbarsBg: "transparent";
  scrollbarsThumb: "#737373";
  selectorActive: "#008ad2";
  selectorText: "#606060";
  sub: "#959595";
  tableStripedBg: "#fafafa";
  text: "#323232";
  text2: "#181818";
  text3: "#000000";
  toggleBgDisabled: "#f0f0f0";
  toggleHandleBg: "#e0e0e0";
  toggleHandleBgDisabled: "#deae84";
  toggleHandleBorder: "#cdcdcd";
  toggleHandleBorderDisabled: "#c29f7d";
  toolbarBg: "#f8f8f8";
  toolbarBorder: "#ababab";
  toolButtonText: "#666e80";
  yellow1: "#ffde9d";
  yellow2: "#e4a429";
  yellow3: "#fff5db";
  };
  },
  DefaultThemeMap,
  {
  mx: (
  value: string | number,
  ) => { marginLeft: (...) | (...); marginRight: (...) | (...) };
  my: (
  value: string | number,
  ) => { marginBottom: (...) | (...); marginTop: (...) | (...) };
  px: (
  value: string | number,
  ) => { paddingLeft: (...) | (...); paddingRight: (...) | (...) };
  py: (
  value: string | number,
  ) => { paddingBottom: (...) | (...); paddingTop: (...) | (...) };
  size: (
  value: string | number,
  ) => { height: (...) | (...); width: (...) | (...) };
  },
  >;
  },
  "className"
  | "css",
  >,
  > & {
  disabled?: boolean;
  onChange: (newValue: boolean) => void;
  onContextMenu?: MouseEventHandler<Element>;
  undeterminedClickValue?: boolean;
  value: null | boolean;
  } & RefAttributes<HTMLInputElement>,
  ): ReactNode

- #### Parameters

  - props: Partial<
    Pick<
    Omit<
    Omit<
    DetailedHTMLProps<
    LabelHTMLAttributes<HTMLLabelElement>,
    HTMLLabelElement,
    >,
    "ref",
    > & {
    ref?:
    | null
    | (instance: null | HTMLLabelElement) => void
    | RefObject<HTMLLabelElement>;
    },
    "css"
    | "disabled",
    > & TransformProps<{ disabled?: boolean | "true" }, {}> & {
    css?: CSS<
    {},
    {
    colors: {
    activeBg: "#e7e7e7";
    background: "white";
    blue1: "#038bf4";
    blue2: "#b7d6f5";
    blue3: "#dbe6ff";
    blue4: "#33b4ff";
    blue5: "#30a2e6";
    border: "#d5d5d5";
    buttonBorder: "#bababa";
    choiceActiveBg: "#f3f3f3";
    choiceActiveText: "#313131";
    choiceBg: "#ffffff";
    choiceBorder: "#cfcfcf";
    choiceText: "#999999";
    focusColor: "#dcaf00";
    green1: "#3ec234";
    green1Darker: "#38af2f";
    grey1: "#737373";
    headerBg: "#efeff0";
    headerBorder: "#c8c8c9";
    headerText: "#484848";
    icon: "#636363";
    inactiveBg: "#d3d3de";
    inactiveDarkBg: "#999";
    inputDisabledBg: "#f3f3f3";
    inputDisabledText: "#959595";
    mainColor: "#008ad2";
    mainColorAlt: "#006AA9";
    modalBg: "#f7f7f7";
    modalButtonBg: "#f8f8f8";
    modalButtonBorder: "#c2c2c2";
    orange1: "#ff7200";
    orange1Darker: "#cc5b00";
    pink1: "#ff388f";
    pinky1: "#f5c0b7";
    pinky2: "#e07b67";
    pinky3: "#ffe1db";
    popText: "#666";
    purple1: "#7357e8";
    red1: "#ea2700";
    scrollbarsBg: "transparent";
    scrollbarsThumb: "#737373";
    selectorActive: "#008ad2";
    selectorText: "#606060";
    sub: "#959595";
    tableStripedBg: "#fafafa";
    text: "#323232";
    text2: "#181818";
    text3: "#000000";
    toggleBgDisabled: "#f0f0f0";
    toggleHandleBg: "#e0e0e0";
    toggleHandleBgDisabled: "#deae84";
    toggleHandleBorder: "#cdcdcd";
    toggleHandleBorderDisabled: "#c29f7d";
    toolbarBg: "#f8f8f8";
    toolbarBorder: "#ababab";
    toolButtonText: "#666e80";
    yellow1: "#ffde9d";
    yellow2: "#e4a429";
    yellow3: "#fff5db";
    };
    },
    DefaultThemeMap,
    {
    mx: (
    value: string | number,
    ) => { marginLeft: (...) | (...); marginRight: (...) | (...) };
    my: (
    value: string | number,
    ) => { marginBottom: (...) | (...); marginTop: (...) | (...) };
    px: (
    value: string | number,
    ) => { paddingLeft: (...) | (...); paddingRight: (...) | (...) };
    py: (
    value: string | number,
    ) => { paddingBottom: (...) | (...); paddingTop: (...) | (...) };
    size: (
    value: string | number,
    ) => { height: (...) | (...); width: (...) | (...) };
    },
    >;
    },
    "className"
    | "css",
    >,
    > & {
    disabled?: boolean;
    onChange: (newValue: boolean) => void;
    onContextMenu?: MouseEventHandler<Element>;
    undeterminedClickValue?: boolean;
    value: null | boolean;
    } & RefAttributes<HTMLInputElement>

    - ##### `Optional` disabled?: boolean

      If true, the toggle is disabled and cannot be interacted with.

    - ##### onChange: (newValue: boolean) => void

    - ##### `Optional` onContextMenu?: MouseEventHandler<Element>

    - ##### `Optional` undeterminedClickValue?: boolean

      If the toggle is in an undetermined state (value is null), clicking it will change the value to this.

    - ##### value: null | boolean

  #### Returns ReactNode

  - Defined in src/components/form/Toggle.tsx:24

#####
Index

### Properties

$$typeof
defaultProps?
displayName?
propTypes?

##
Properties

### `Readonly`$$typeof

$$typeof: symbol

- Defined in node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/index.d.ts:644

### `Optional` defaultProps

defaultProps?: Partial<
Partial<
Pick<
Omit<
Omit<
DetailedHTMLProps<LabelHTMLAttributes<(...)>, HTMLLabelElement>,
"ref",
> & { ref?: null | (instance: ...) => ... | RefObject<(...)> },
"css" | "disabled",
> & TransformProps<{ disabled?: boolean | "true" }, {}> & {
css?: CSS<
{},
{
colors: {
activeBg: ...;
background: ...;
blue1: ...;
blue2: ...;
blue3: ...;
blue4: ...;
blue5: ...;
border: ...;
buttonBorder: ...;
choiceActiveBg: ...;
choiceActiveText: ...;
choiceBg: ...;
choiceBorder: ...;
choiceText: ...;
focusColor: ...;
green1: ...;
green1Darker: ...;
grey1: ...;
headerBg: ...;
headerBorder: ...;
headerText: ...;
icon: ...;
inactiveBg: ...;
inactiveDarkBg: ...;
inputDisabledBg: ...;
inputDisabledText: ...;
mainColor: ...;
mainColorAlt: ...;
modalBg: ...;
modalButtonBg: ...;
modalButtonBorder: ...;
orange1: ...;
orange1Darker: ...;
pink1: ...;
pinky1: ...;
pinky2: ...;
pinky3: ...;
popText: ...;
purple1: ...;
red1: ...;
scrollbarsBg: ...;
scrollbarsThumb: ...;
selectorActive: ...;
selectorText: ...;
sub: ...;
tableStripedBg: ...;
text: ...;
text2: ...;
text3: ...;
toggleBgDisabled: ...;
toggleHandleBg: ...;
toggleHandleBgDisabled: ...;
toggleHandleBorder: ...;
toggleHandleBorderDisabled: ...;
toolbarBg: ...;
toolbarBorder: ...;
toolButtonText: ...;
yellow1: ...;
yellow2: ...;
yellow3: ...;
};
},
DefaultThemeMap,
{
mx: (value: ...) => ...;
my: (value: ...) => ...;
px: (value: ...) => ...;
py: (value: ...) => ...;
size: (value: ...) => ...;
},
>;
},
"className"
| "css",
>,
> & {
disabled?: boolean;
onChange: (newValue: boolean) => void;
onContextMenu?: MouseEventHandler<Element>;
undeterminedClickValue?: boolean;
value: null | boolean;
} & RefAttributes<HTMLInputElement>,
>

#### Deprecated

Use values for destructuring assignments instead.

- Defined in node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/index.d.ts:1582

### `Optional` displayName

displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

#### See

Legacy React Docs

- Defined in node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/index.d.ts:660

### `Optional` propTypes

propTypes?: WeakValidationMap<
Partial<
Pick<
Omit<
Omit<
DetailedHTMLProps<LabelHTMLAttributes<(...)>, HTMLLabelElement>,
"ref",
> & { ref?: null | (instance: ...) => ... | RefObject<(...)> },
"css" | "disabled",
> & TransformProps<{ disabled?: boolean | "true" }, {}> & {
css?: CSS<
{},
{
colors: {
activeBg: ...;
background: ...;
blue1: ...;
blue2: ...;
blue3: ...;
blue4: ...;
blue5: ...;
border: ...;
buttonBorder: ...;
choiceActiveBg: ...;
choiceActiveText: ...;
choiceBg: ...;
choiceBorder: ...;
choiceText: ...;
focusColor: ...;
green1: ...;
green1Darker: ...;
grey1: ...;
headerBg: ...;
headerBorder: ...;
headerText: ...;
icon: ...;
inactiveBg: ...;
inactiveDarkBg: ...;
inputDisabledBg: ...;
inputDisabledText: ...;
mainColor: ...;
mainColorAlt: ...;
modalBg: ...;
modalButtonBg: ...;
modalButtonBorder: ...;
orange1: ...;
orange1Darker: ...;
pink1: ...;
pinky1: ...;
pinky2: ...;
pinky3: ...;
popText: ...;
purple1: ...;
red1: ...;
scrollbarsBg: ...;
scrollbarsThumb: ...;
selectorActive: ...;
selectorText: ...;
sub: ...;
tableStripedBg: ...;
text: ...;
text2: ...;
text3: ...;
toggleBgDisabled: ...;
toggleHandleBg: ...;
toggleHandleBgDisabled: ...;
toggleHandleBorder: ...;
toggleHandleBorderDisabled: ...;
toolbarBg: ...;
toolbarBorder: ...;
toolButtonText: ...;
yellow1: ...;
yellow2: ...;
yellow3: ...;
};
},
DefaultThemeMap,
{
mx: (value: ...) => ...;
my: (value: ...) => ...;
px: (value: ...) => ...;
py: (value: ...) => ...;
size: (value: ...) => ...;
},
>;
},
"className"
| "css",
>,
> & {
disabled?: boolean;
onChange: (newValue: boolean) => void;
onContextMenu?: MouseEventHandler<Element>;
undeterminedClickValue?: boolean;
value: null | boolean;
} & RefAttributes<HTMLInputElement>,
>

- Defined in node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/index.d.ts:1583