Checkbox

Properties Overview

• native (Boolean): Determines if the checkbox should use native HTML elements or custom components.

• name (String): Unique name for the checkbox.

• label (Object): Styling options for the labels of the checkbox.

  • fontFamily (String): Font family for the label text.

  • color (Color): Color of the label text.

  • fontSize (Number): Font size of the label text.

  • Text: Text of the label

• value (String): Value for the checkbox option.

• selected (String): The default selected value of the checkbox.

• checkedComponent (ComponentInstance): Custom component to display when the checkbox is selected.

• uncheckedComponent (ComponentInstance): Custom component to display when the checkbox is not selected.

• layout (Object): Layout configuration for arranging the checkbox.

  • direction (Enum): Direction of the checkbox (row or column).

  • distribute (Enum): Distribution of the checkbox within the container (start, center, end, space-between, space-around, space-evenly).

  • align (Enum): Alignment of the checkbox within the container (start, center, end).

  • wrap (Boolean): Determines if the checkbox should wrap to the next line.

  • gap (Number): Gap between each checkbox.

Implementation

Basic Setup

To integrate the Checkbox component into your Framer project, use it within your form or design structure and configure the properties as needed. Here’s a basic setup example:

import Checkbox from "./path/to/Checkbox";

export const MyCheckGroup = () => (
  <div>
    <Checkbox
      native={true}
      name="example-checkbox"
      value="terms"
      selected={false}
      label={{
          text: "Accept terms",
          fontFamily: "Arial",
          color: "#333333",
          fontSize: 16,
      }}
      layout={{
        direction: "row",
        distribute: "start",
        align: "center",
        wrap: false,
        gap: 10,
      }}
    />
  </div>
);

Custom Components and Layout

export const AdvancedCheckGroup = () => (
  <div>
    <Checkbox
      native={false}
      name="custom-checkbox"
      value="newsletter"
      selected={false}
      checkedComponent={<CheckedIcon />}  // Replace with your custom checked component
      uncheckedComponent={<UncheckedIcon />}  // Replace with your custom unchecked component
      label={{
          text: "Subscribe",
          fontFamily: "Arial",
          color: "#333333",
          fontSize: 14,
      }}
      layout={{
        direction: "column",
        distribute: "start",
        align: "start",
        wrap: true,
        gap: 15,
      }}
    />
  </div>
);

Notes

• Native Property: Set the native property to true to use a standard HTML checkbox, or to false to use custom components for selected and unselected states.

• Item Object: Use the item property to define the label and value of the checkbox.

• Selected Value: The selected property sets the default selected state of the checkbox.

• Custom Components: Utilize the checkedComponent and uncheckedComponent properties to set custom components for different checkbox states.

• Layout Customization: Configure the layout object to arrange the checkbox in rows or columns, control alignment, and adjust spacing.

• Label Styling: Customize the appearance of the checkbox label using the properties within the label object to match your design preferences.