@hubspot/ui-extensions 0.0.0 → 0.0.1-beta.0

package/README.md

@@ -0,0 +1,1715 @@
+# UI Extensions
+
+React components and utilities for extending HubSpot's UI.
+
+## TOC
+
+- [Alert](#alert)
+- [Button](#button)
+- [ButtonRow](#buttonrow)
+- [Card](#card)
+- [DescriptionList](#descriptionlist)
+  - [DescriptionListItem](#descriptionlistitem)
+- [Divider](#divider)
+- [Form](#form)
+- [EmptyState](#emptystate)
+- [ErrorState](#errorstate)
+- [Heading](#heading)
+- [Image](#image)
+- [Input](#input)
+- [Link](#link)
+- [LoadingSpinner](#loadingspinner)
+- [ProgressBar](#progressbar)
+- [Select](#select)
+- [Stack](#stack)
+- [Statistics](#statistics)
+  - [StatisticsItem](#statisticsitem)
+  - [StatisticsTrend](#statisticstrend)
+- [Table](#table)
+  - [TableBody](#tablebody)
+  - [TableCell](#tablecell)
+  - [TableFooter](#tablefooter)
+  - [TableHead](#tablehead)
+  - [TableHeader](#tableheader)
+  - [TableRow](#tablerow)
+- [Tag](#tag)
+- [Text](#text)
+- [Textarea](#textarea)
+- [Tile](#tile)
+- [ToggleGroup](#togglegroup)
+
+## Components
+
+### Alert
+
+##### Import
+
+```javascript
+import { Alert } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+The Alert component accepts the following props:
+
+```typescript
+export interface AlertProps {
+  title: string;
+  body?: string;
+  children?: ReactNode;
+  variant?: 'info' | 'warning' | 'success' | 'error' | 'danger';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | `N/A` | The title text for the alert message. |
+| `body` | `string(optional)` | `N/A` | The main content of the alert message. If not provided, the children prop is used. |
+| `children` | `ReactNode(optional)` | `N/A` | The main content of the alert message when the body prop is not provided. |
+| `variant` | `'info' \| 'warning' \| 'success' \|'error' \| 'danger'` `(optional)` | `'info'` | Sets the color variation of the alert |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <>
+      <Alert title="Important Info" variant="info">
+        This is an informative message.
+      </Alert>
+      <Alert
+        title="Success"
+        body="Operation completed successfully."
+        variant="success"
+      />
+      <Alert title="Warning" body="Proceed with caution." variant="warning" />
+      <Alert
+        title="Error"
+        body="Something went wrong. Please try again."
+        variant="error"
+      />
+      <Alert
+        title="Danger"
+        body="This action cannot be undone. Be careful."
+        variant="danger"
+      />
+    </>
+  );
+};
+```
+
+### Button
+
+##### Import
+
+```javascript
+import { Button } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface ButtonProps {
+  children: string;
+  onClick?: () => void;
+  href?: string;
+  disabled?: boolean;
+  variant?: 'primary' | 'secondary' | 'destructive';
+  type?: 'button' | 'reset' | 'submit';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `string` | `N/A` | The displayable text for the Button |
+| `onClick` | `() => void` `(optional)` | `N/A` | A function that will be invoked when the button is clicked. It receives no arguments and it's return value is ignored |
+| `href` | `string(optional)` | `N/A` | A URL that will be opened when the button is clicked. If the value is a URL external to HubSpot it will be opened in a new tab. |
+| `disabled` | `boolean(optional)` | `N/A` | Determines if the button should be disabled or not. |
+| `variant` | `'primary' \| 'secondary' \| 'destructive'` `(optional)` | `'secondary'` | Sets the color variation of the button |
+| `type` | `'button' \| 'reset' \| 'submit'` `(optional)` | `'button'` | Sets the HTML attribute "role" of the button |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Button
+      onClick={() => {
+        console.log('Someone clicked on the button!');
+      }}
+      href="https://hubspot.com"
+      variant="destructive"
+      type="button"
+    >
+      Click me!
+    </Button>
+  );
+};
+```
+
+### ButtonRow
+
+##### Import
+
+```javascript
+import { ButtonRow } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface ButtonRowProps {
+  children: ReactNode;
+  disableDropdown?: boolean;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `disableDropdown` | `boolean(optional)` | `false` | Disables the dropdown list of buttons that appears the the children expand beyond the horizontal space |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <ButtonRow disableDropdown={false}>
+      <Button
+        onClick={() => {
+          console.log('Regular button clicked');
+        }}
+      >
+        Regular Button
+      </Button>
+      <Button
+        onClick={() => {
+          console.log('Reset button clicked');
+        }}
+        variant="destructive"
+        type="reset"
+      >
+        Reset
+      </Button>
+      <Button
+        onClick={() => {
+          console.log('Submit button clicked');
+        }}
+        variant="primary"
+        type="submit"
+      >
+        Submit
+      </Button>
+    </ButtonRow>
+  );
+};
+```
+
+### Card
+
+##### Import
+
+```javascript
+import { Card } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface CardProps {
+  children: ReactNode;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Card>
+      <Button
+        onClick={() => {
+          console.log('Regular button clicked');
+        }}
+      >
+        Regular Button
+      </Button>
+    </Card>
+  );
+};
+```
+
+### DescriptionList
+
+##### Import
+
+```javascript
+import { DescriptionList } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface DescriptionListProps {
+  children: ReactNode;
+  direction?: 'row' | 'column';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be [DescriptionListItem](#descriptionlistitem) |
+| `direction` | `'row' \| 'column'` `(optional)` | `'column'` | The direction the label/value pairs are placed in the description list container. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <DescriptionList direction="row">
+      <DescriptionListItem label={'First Name'}>
+        <Text>Alan</Text>
+      </DescriptionListItem>
+      <DescriptionListItem label={'Last Name'}>
+        <Text>Turing</Text>
+      </DescriptionListItem>
+    </DescriptionList>
+  );
+};
+```
+
+#### DescriptionListItem
+
+##### Import
+
+```javascript
+import { DescriptionListItem } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface DescriptionListItemProps {
+  children: ReactNode;
+  label: string;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `label` | `string` | `N/A` | Text to be displayed as the label |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <DescriptionList direction="row">
+      <DescriptionListItem label={'First Name'}>
+        <Text>Alan</Text>
+      </DescriptionListItem>
+      <DescriptionListItem label={'Last Name'}>
+        <Text>Turing</Text>
+      </DescriptionListItem>
+    </DescriptionList>
+  );
+};
+```
+
+### Divider
+
+##### Import
+
+```javascript
+import { Divider } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface DividerProps {
+  distance?:
+    | 'flush'
+    | 'extra-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'extra-large';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `distance` | `'flush'\| 'extra-small' \| 'small' \| 'medium' \| 'large'\| 'extra-large'` `(optional)` | `'small'` | The size of the padding above and below the divider. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return <Divider distance="extra-large" />;
+};
+```
+
+### Form
+
+##### Import
+
+```javascript
+import { Form } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface FormProps {
+  children: ReactNode;
+  onSubmit?: (event: RemoteEvent<FormInputValues>) => void;
+  preventDefault?: boolean;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `onSubmit` | `function(optional)` | `N/A` | A function that will be called when the form is submitted. It will receive a `RemoteEvent` as argument and it's return value will be ignored. |
+| `preventDefault` | `boolean(optional)` | `false` | If set to `true` `event.preventDefault()` will be invoked before your `onSubmit` function is called, preventing the default html form behavior. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Form onSubmit={() => { console.log('Form submitted!')}} preventDefault={true}>
+      <Input {...} />
+      <Select {...} />
+      <Button
+        onClick={() => {
+          console.log('Submit button clicked');
+        }}
+        variant="primary"
+        type="submit"
+      >
+        Submit
+      </Button>
+    </Form>
+  );
+}
+```
+
+### EmptyState
+
+##### Import
+
+```javascript
+import { EmptyState } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface EmptyStateProps {
+  children: ReactNode;
+  flush?: boolean;
+  imageWidth?: number;
+  layout?: 'horizontal' | 'vertical';
+  reverseOrder?: boolean;
+  title?: string;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `flush` | `boolean(optional)` | `false` | Removes the default vertical margins for the component. |
+| `imageWidth` | `number(optional)` | `250` | The max-width for the image container. |
+| `layout` | `'horizontal' \| 'vertical'` `(optional)` | `'horizontal'` | Sets the layout direction for the content. |
+| `reverseOrder` | `boolean(optional)` | `false` | Swaps the visual order of the text (primary) and image (secondary) content. This ensures the primary content is still presented first to assistive technology. |
+| `title` | `string(optional)` | `Intl('All is not lost.')` | The text for the title header rendered above the `children`. |
+
+##### Usage
+
+```javascript
+const Extension = ({ data }) => {
+  if (!data || !data.length) {
+    return (
+      <EmptyState title="Nothing here yet" layout="vertical" reverseOrder={true}>
+        <Text>Go out there and get some leads!</Text>
+      </EmptyState>
+    )
+  }
+
+  return (
+    <Stack>
+      {data.map(...)}
+    </Stack>
+  );
+}
+```
+
+### ErrorState
+
+##### Import
+
+```javascript
+import { ErrorState } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface ErrorStateProps {
+  children: ReactNode;
+  title?: string;
+  type?: 'error' | 'support' | 'lock';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `title` | `string(optional)` | `Intl('All is not lost.')` | The text for the title header rendered above the `children`. |
+| `type` | `'error' \| 'support' \| 'lock'` `(optional)` | `'error'` | Sets the type of error image that will be shown. |
+
+##### Usage
+
+```javascript
+const Extension = ({ data, error, fetchData }) => {
+  if (error) {
+    return (
+      <ErrorState title="Trouble fetching properties." layout="vertical" reverseOrder={true}>
+        <Stack>
+          <Text>
+            Please try again in a few moments.
+          </Text>
+          <Button onClick={fetchData}>
+            Try again
+          </Button>
+        </Stack>
+      </ErrorState>
+    )
+  }
+
+  return (
+    <Stack>
+      {data.map(...)}
+    </Stack>
+  );
+}
+```
+
+### Heading
+
+##### Import
+
+```javascript
+import { Heading } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface HeadingProps {
+  children: ReactNode;
+  inline?: boolean;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `string` | `N/A` | Text to be displayed as heading text. |
+| `inline` | `boolean(optional)` | `false` | Determines if the text will break line or share the space. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return <Heading>Plain text, nothing special here</Heading>;
+};
+```
+
+### Image
+
+##### Import
+
+```javascript
+import { Image } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface ImageProps {
+  alt?: string;
+  href?: string;
+  onClick?: () => void;
+  src: string;
+  width?: number;
+}
+```
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `alt` | `string(optional)` | The alt text for the image, similar to the `alt` attribute for the html [img tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) |
+| `href` | `string(optional)` | If provided, it will be used as a href that will be opened in a new tag when the image is clicked |
+| `onClick` | `function(optional)` | A function that will be called when the image is clicked on. This function will receive no arguments any returned values will be ignored. |
+| `src` | `string` | The url to the image to display, similar to [img tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) |
+| `width` | `number(optional)` | The pixel width of the image |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Image
+      alt="A picture of an adorable black lab puppy, click on me to see in a new tab"
+      src="https://picsum.photos/id/237/200/300"
+      href="https://picsum.photos/id/237"
+      onClick={() => {
+        console.log('Someone clicked on the image!');
+      }}
+      width={200}
+    />
+  );
+};
+```
+
+### Input
+
+##### Import
+
+```javascript
+import { Input } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface InputProps {
+  label: string;
+  name: string;
+  value?: string;
+  required?: boolean;
+  readOnly?: boolean;
+  description?: string;
+  tooltip?: string;
+  placeholder?: string;
+  error?: boolean;
+  validationMessage?: string;
+  onChange?: (value: string) => void;
+  onInput?: (value: string) => void;
+  onBlur?: (value: string) => void;
+  onFocus?: (value: string) => void;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A` | The label text to display for the form input element |
+| `name` | `string` | `N/A` | The unique identifier for the input element, this could be thought of as the HTML5 [Input element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) |
+| `value` | `string(optional)` | `''` | The value of the input |
+| `required` | `boolean(optional)` | `false` | Determines if the required indicator should be displayed |
+| `readOnly` | `boolean(optional)` | `false` | Determines if the field is editable or not. |
+| `description` | `string(optional)` | `N/A` | Instructional message to display to the user to help understand the purpose of the input. |
+| `tooltip` | `string(optional)` | `N/A` | Text that will appear in a tooltip next to the input label. |
+| `placeholder` | `string(optional)` | `N/A` | Text that appears in the input when it has no value set. |
+| `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''` | The text to show if the input has an error. |
+| `onChange` | `(value: string) => void(optional)` | `N/A` | A callback function that is invoked when the value is committed. Currently these times are `onBlur` of the input and when the user submits the form. |
+| `onInput` | `(value: string) => void(optional)` | `N/A` | A function that is called and passed the value every time the field is edited by the user. It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
+| `onBlur` | `(value: string) => void(optional)` | `N/A` | A function that is called and passed the value every time the field loses focus. |
+| `onFocus` | `(value: string) => void(optional)` | `N/A` | A function that is called and passed the value every time the field gets focused. |
+
+##### Usage
+
+```javascript
+import { useState } from 'react';
+
+const Extension = () => {
+  const [name, setName] = useState('');
+  const [validationMessage, setValidationMessage] = useState('');
+  const [isValid, setIsValid] = useState(true);
+
+  return (
+    <Form>
+      <Input
+        label="First Name"
+        name="first-name"
+        tooltip="Please enter your first name"
+        description="Please enter your first name"
+        placeholder="First name"
+        required={true}
+        error={!isValid}
+        validationMessage={validationMessage}
+        onChange={value => {
+          setName(value);
+        }}
+        onInput={value => {
+          if (value !== 'Bill') {
+            setValidationMessage('This form only works for people named Bill');
+            setIsValid(false);
+          } else if (value === '') {
+            setValidationMessage('First name is required');
+            setIsValid(false);
+          } else {
+            setValidationMessage('Valid first name!');
+            setIsValid(true);
+          }
+        }}
+      />
+    </Form>
+  );
+};
+```
+
+### Link
+
+##### Import
+
+```javascript
+import { Link } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+export interface LinkProps {
+  href: string;
+  variant?: 'primary' | 'destructive' | 'light' | 'dark';
+  children: ReactNode;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `href` | `string` | `N/A` | A URL that will be opened when the link is clicked. If the value is a URL external to HubSpot it will be opened in a new tab. |
+| `variant` | `'primary' \| 'light' \| 'dark' \| 'destructive'` `(optional)` | `'primary'` | Sets the color variation of the link |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return <Link href="https://app.hubspot.com/">HubSpot</Link>;
+};
+```
+
+### LoadingSpinner
+
+##### Import
+
+```javascript
+import { LoadingSpinner } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+export interface LoadingSpinnerProps {
+  label: string;
+  showLabel?: boolean;
+  size?: 'xs' | 'sm' | 'md';
+  layout?: 'inline' | 'centered';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A` | The companion text for the loading spinner. |
+| `showLabel` | `boolean(optional)` | `false` | if `true`, the label will be visible alongside the loading spinner. |
+| `size` | `'xs'\| 'sm' \| 'md'` `(optional)` | `'sm'` | The size of the loading spinner icon. |
+| `layout` | `'inline'\| 'centered'` `(optional)` | `N/A` | Use the `centered` option for layout as a convenience for the common pattern of filling the space of its parent. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return <LoadingSpinner label="Loading..." />;
+};
+```
+
+### ProgressBar
+
+##### Import
+
+```javascript
+import { ProgressBar } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+export interface ProgressBarProps {
+  title?: string;
+  showPercentage?: boolean;
+  value?: number;
+  valueMax?: number;
+  valueDescription?: string;
+  variant?: 'success' | 'danger' | 'warning';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string(optional)` | `N/A` | Text to be displayed in the progressbar title. |
+| `showPercentage` | `boolean(optional)` | `false` | Toggles the display of the completion percentage. |
+| `value` | `number(optional)` | `0` | The value of the progress indicator. |
+| `valueMax` | `number(optional)` | `100` | The maximum value of the progress. |
+| `valueDescription` | `string(optional)` | `N/A` | Text that explains the current state of the `value` prop. Renders to the right of `title`. **Example: "10,000 of 7,500"** |
+| `variant` | `'success' \| 'danger' \| 'warning'` | `'success'` | The type of progressbar to display. Defaults to success. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <ProgressBar
+      variant="warning"
+      value={50}
+      valueMax={200}
+      showPercentage={true}
+    />
+  );
+};
+```
+
+### Select
+
+##### Import
+
+```javascript
+import { Select } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface SelectProps {
+  label: string;
+  name: string;
+  value?: string | number | boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  description?: string;
+  tooltip?: string;
+  placeholder?: string;
+  error?: boolean;
+  errorMessage?: string;
+  onChange: (value: string) => void;
+  options: {
+    label: string;
+    value: string | number | boolean;
+  }[];
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A` | The label text to display for the select element |
+| `name` | `string` | `N/A` | The unique identifier for the select element. |
+| `value` | `string \| number \| boolean` | `''` | The value of the select input. |
+| `required` | `boolean` | `false` | Determines if the required indicator should be displayed |
+| `readOnly` | `boolean` | `false` | Determines if the field is editable or not. |
+| `description` | `string` | `N/A` | Instructional message to display to the user to help understand the purpose of the input. |
+| `tooltip` | `string` | `N/A` | Text that will appear in a tooltip next to the input label. |
+| `placeholder` | `string` | `N/A` | Text that appears in the input when it has no value set. |
+| `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''` | The text to show if the input has an error. |
+| `onChange` | `(value: string) => void` | `N/A` | Function that is called with the new value when it is updated. |
+| `options` | `Array<{label: string; value: string \| number \| boolean}>` | `N/A` | Array of options to be displayed in the select. `label` will be used as the display text in the dropdown list and `value` should be a **unique** identifier. `value` is the data that will be submitted with the form. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  const [name, setName] = useState(null);
+  const [validationMessage, setValidationMessage] = useState('');
+  const [isValid, setIsValid] = useState(true);
+
+  const options = [
+    { label: 'Bill', value: 42 },
+    { label: 'Ted', value: 43 },
+  ];
+
+  return (
+    <Form>
+      <Select
+        label="Best Bill & Ted Character?"
+        name="best-char"
+        tooltip="Please choose"
+        description="Please choose"
+        placeholder="Bill or Ted?"
+        required={true}
+        error={!isValid}
+        validationMessage={validationMessage}
+        onChange={value => {
+          setName(value);
+          if (!value) {
+            setValidationMessage('This is required');
+            setIsValid(false);
+          } else {
+            setValidationMessage('Excellent!');
+            setIsValid(true);
+          }
+        }}
+        options={options}
+      />
+    </Form>
+  );
+};
+```
+
+### Stack
+
+##### Import
+
+```javascript
+import { Stack } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface StackProps {
+  distance?: 'flush' | 'small' | 'extra-small' | 'medium' | 'large';
+  direction?: 'row' | 'column';
+  children?: ReactNode;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `distance` | `'flush' \| 'extra-small' \| 'small' \| 'medium' \| 'large'` | `'small'` | Amount of space between each child component passed as children |
+| `direction` | `'row' \| 'column'` | `'column'` | Stacks elements in the vertical or horizontal direction. |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Stack>
+      <Image {...} />
+      <Text {...} />
+    </Stack>
+    );
+}
+```
+
+### Statistics
+
+##### Import
+
+```javascript
+import { Statistics } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface StatisticsProps {
+  children: ReactNode;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. These children should be [StatisticsItem](#statisticsitem) or [StatisticsTrend](#statisticstrend) |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Statistics>
+      <StatisticsItem {...} />
+      <StatisticsTrend {...} />
+    </Statistics>
+  );
+}
+```
+
+#### StatisticsItem
+
+##### Import
+
+```javascript
+import { StatisticsItem } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface StatisticsItemProps {
+  id?: string;
+  label: string;
+  number: string;
+  children: ReactNode;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `id` | `string(optional)` | `N/A` | The unique identifier |
+| `label` | `string` | `N/A` | The text to be used as a label |
+| `number` | `string` | `N/A` | Fully formatted string to be displayed as the item's primary number |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. These children should be [Text](#text) or [StatisticsTrend](#statisticstrend) |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Statistics>
+      <StatisticsItem label="Sales" number={'30000'}>
+        <Text>Big Numbers</Text>
+      </StatisticsItem>
+    </Statistics>
+  );
+};
+```
+
+#### StatisticsTrend
+
+##### Import
+
+```javascript
+import { StatisticsTrend } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface StatisticsTrendProps {
+  value: string;
+  direction: 'increase' | 'decrease';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string` | `N/A` | Formatted string to be displayed as trend value |
+| `direction` | `'increase' \| 'decrease'` | `N/A` | Direction in which the trend arrow should be displayed |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Statistics>
+      <StatisticsItem label="Item A Sales" number="10000">
+        <StatisticsTrend direction="decrease" value="200%" />
+      </StatisticsItem>
+      <StatisticsItem label="Item B Sales" number="100000">
+        <StatisticsTrend direction="increase" value="100%" />
+      </StatisticsItem>
+    </Statistics>
+  );
+};
+```
+
+### Table
+
+##### Import
+
+```javascript
+import { Table } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface TableProps {
+  children: ReactNode;
+  flush?: boolean;
+  bordered?: boolean;
+  paginated?: boolean;
+  // if paginated=true
+  pageCount: number;
+  onPageChange: (pageNumber: number) => void;
+  showButtonLabels?: boolean;
+  showFirstLastButtons?: boolean;
+  maxVisiblePageButtons?: number;
+  page?: number;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. These children should be [TableHead](#tablehead), [TableFooter](#tablefooter), or [TableBody](#tablebody) |
+| `flush` | `boolean(optional)` | `false` | If true the table will not have bottom margin. |
+| `bordered` | `boolean(optional)` | `true` | If false the table will not haver borders around its content. |
+| `paginated` | `boolean(optional)` | `false` | If true, the table will display the paginator component and consumer will have to provide extra pagination props. |
+
+**Props for paginated=true**
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `pageCount` | `number` | `N/A` | The total number of pages available |
+| `onPageChange` | `onPageChange: (pageNumber: number) => void` | `N/A` | A function that will be invoked when the pagination button is clicked. It receives the new page number as argument. |
+| `showButtonLabels` | `boolean(optional)` | `true` | if `false`, it hides the text labels for the First/Prev/Next/Last buttons. The button labels will still be accessible for screen readers. |
+| `showFirstLastButtons` | `boolean(optional)` | `false` | if `true`, it displays the First page and Last page buttons. |
+| `maxVisiblePageButtons` | `number(optional)` | `5` | Changes how many page buttons are shown. |
+| `page` | `number(optional)` | `N/A` | Denotes the current page. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+// Paginated example
+
+function generateData(count = 15) {
+  const result = [];
+
+  for (let index = 0; index < count; index++) {
+    result.push({
+      name: `Jane Doe ${index}`,
+      email: `janedoemail${index}@hubspot.com`,
+    });
+  }
+
+  return result;
+}
+
+function PaginatedTable() {
+  const ITEMS_PER_PAGE = 10;
+  const data = generateData(30);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageCount = data.length / ITEMS_PER_PAGE;
+
+  const dataToDisplay = data.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  );
+
+  return (
+    <Table
+      paginated={true}
+      pageCount={pageCount}
+      page={currentPage}
+      onPageChange={(nextPageNumber: number) => {
+        setCurrentPage(nextPageNumber);
+      }}
+    >
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Email</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {dataToDisplay.map(({ name, email }) => {
+          console.log(name, email);
+          return (
+            <TableRow key={email}>
+              <TableCell>{name}</TableCell>
+              <TableCell>{email}</TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### TableBody
+
+##### Import
+
+```javascript
+import { TableBody } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface TableBodyProps {
+  children: ReactNode;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. These children should be [TableRow](#tablerow). |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+```
+
+### TableCell
+
+##### Import
+
+```javascript
+import { TableCell } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface TableCellProps {
+  children: ReactNode;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+```
+
+### TableFooter
+
+##### Import
+
+```javascript
+import { TableFooter } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface TableFooterProps {
+  children: ReactNode;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. These children should be [TableRow](#tablerow). |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Series</TableHeader>
+          <TableHeader>Years on air</TableHeader>
+          <TableHeader>Emmys</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableFooter>
+        <TableRow>
+          <TableHeader>Totals</TableHeader>
+          <TableHeader>43</TableHeader>
+          <TableHeader>50</TableHeader>
+        </TableRow>
+      </TableFooter>
+      <TableBody>
+        <TableRow>
+          <TableCell>The Simpsons</TableCell>
+          <TableCell>28</TableCell>
+          <TableCell>31</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>M*A*S*H</TableCell>
+          <TableCell>11</TableCell>
+          <TableCell>14</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Arrested Development</TableCell>
+          <TableCell>4</TableCell>
+          <TableCell>5</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+```
+
+### TableHead
+
+##### Import
+
+```javascript
+import { TableHead } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface TableHeadProps {
+  children: ReactNode;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. These children should be [TableHeader](#tableheader). |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+```
+
+### TableHeader
+
+##### Import
+
+```javascript
+import { TableHeader } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface TableHeaderProps {
+  children: ReactNode;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+```
+
+### TableRow
+
+##### Import
+
+```javascript
+import { TableRow } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface TableRowProps {
+  children: ReactNode;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+```
+
+### Tag
+
+##### Import
+
+```javascript
+import { Tag } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface TagProps {
+  children: ReactNode;
+  onClick?: () => void;
+  variant?: 'default' | 'warning' | 'success' | 'error';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `string` | `N/A` | Text to be displayed in the tag. |
+| `onClick` | `() => void` `(optional)` | `N/A` | A function that will be invoked when the `Tag` is clicked. It receives no arguments and it's return value is ignored. |
+| `variant` | `'default' \| 'warning' \| 'success' \| 'error'` `(optional)` | `'default'` | The color variation of the tag to display |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Tag
+      variant="success"
+      onClick={() => {
+        console.log('Tag clicked!');
+      }}
+    >
+      Success
+    </Tag>
+  );
+};
+```
+
+### Text
+
+##### Import
+
+```javascript
+import { Text } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface TextProps {
+  format?: 'plaintext' | 'markdown';
+  variant?: 'bodytext' | 'microcopy';
+  children: ReactNode;
+  tagName?: 'p' | 'span' | 'small';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `format` | `'plaintext' \| 'markdown'` `(optional)` | `'plaintext'` | Type of formatting for the display text. |
+| `children` | `string` | `N/A` | Text to be displayed as body text. |
+| `variant` | `'bodytext' \| 'microcopy'` | `'bodytext'` | Type of text to display |
+| `tagName` | `'p' \| 'small' \| 'span'` | `'bodytext'` | Type of text element(tag) to display. |
+
+#### Markdown
+
+Markdown syntax supported in the component:
+
+- bold text: `**like this**` or `__like this__`
+- italicized text: `*like this*` or `_like this_`
+- inline code: `` `like this` ``
+- links: `[visible anchor text](https://www.hubspot.com/)`
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <>
+      <Text format="markdown">**Bold**</Text>
+      <Text format="markdown">*Italics*</Text>
+      <Text>**Not Bold because format isn't markdown**</Text>
+      <Text variant="microcopy">This is going to be small</Text>
+    </>
+  );
+};
+```
+
+### Textarea
+
+##### Import
+
+```javascript
+import { Textarea } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface TextareaProps {
+  label: string;
+  name: string;
+  value?: string;
+  required?: boolean;
+  readOnly?: boolean;
+  description?: string;
+  tooltip?: string;
+  placeholder?: string;
+  error?: boolean;
+  validationMessage?: string;
+  onChange?: (value: string) => void;
+  onInput?: (value: string) => void;
+  onBlur?: (value: string) => void;
+  onFocus?: (value: string) => void;
+  cols?: number;
+  maxLength?: number;
+  rows?: number;
+  resize?: 'vertical' | 'horizontal' | 'both' | 'none';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A` | The label text to display for the textarea element |
+| `name` | `string` | `N/A` | The unique identifier for the textarea element, this could be thought of as the HTML5 [Textarea element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name) |
+| `value` | `string(optional)` | `''` | The value of the textarea |
+| `required` | `boolean(optional)` | `false` | Determines if the required indicator should be displayed |
+| `readOnly` | `boolean(optional)` | `false` | Determines if the field is editable or not. |
+| `description` | `string(optional)` | `N/A` | Instructional message to display to the user to help understand the purpose of the textarea. |
+| `tooltip` | `string(optional)` | `N/A` | Text that will appear in a tooltip next to the textarea label. |
+| `placeholder` | `string(optional)` | `N/A` | Text that appears in the textarea when it has no value set. |
+| `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The textarea will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''` | The text to show if the textarea has an error. |
+| `onChange` | `(value: string) => void(optional)` | `N/A` | A callback function that is invoked when the value is committed. Currently these times are `onBlur` of the textarea and when the user submits the form. |
+| `onInput` | `(value: string) => void(optional)` | `N/A` | A function that is called and passed the value every time the field is edited by the user. It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
+| `onBlur` | `(value: string) => void(optional)` | `N/A` | A function that is called and passed the value every time the field loses focus. |
+| `onFocus` | `(value: string) => void(optional)` | `N/A` | A function that is called and passed the value every time the field gets focused. |
+| `cols` | `number(optional)` | `N/A` | The visible width of the text control, in average character widths. |
+| `rows` | `number(optional)` | `N/A` | The number of visible text lines for the control. |
+| `maxLength` | `number(optional)` | `N/A` | The maximum number of characters (UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters. |
+| `resize` | `'vertical' \| 'horizontal' \| 'both' \| 'none'` `(optional)` | `'vertical'` | Sets whether an element is resizable, and if so, in which directions. |
+
+##### Usage
+
+```javascript
+import { useState } from 'react';
+
+const Extension = () => {
+  const [desciptiption, setDescription] = useState('');
+  const [validationMessage, setValidationMessage] = useState('');
+  const [isValid, setIsValid] = useState(true);
+
+  return (
+    <Form>
+      <Textarea
+        label="Description"
+        name="description"
+        tooltip="Provide as much detail as possible"
+        description="Please include a link"
+        placeholder="My desription"
+        required={true}
+        error={!isValid}
+        validationMessage={validationMessage}
+        onChange={value => {
+          setDescription(value);
+        }}
+        onInput={value => {
+          if (!value.includes('http')) {
+            setValidationMessage('A link must be included.');
+            setIsValid(false);
+          } else {
+            setValidationMessage('Valid description!');
+            setIsValid(true);
+          }
+        }}
+      />
+    </Form>
+  );
+};
+```
+
+### Tile
+
+##### Import
+
+```javascript
+import { Tile } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface TileProps {
+  children: ReactNode;
+  flush?: boolean;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `flush` | `boolean(optional)` | `false` | If true the content of the Tile will have no left or right padding. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <>
+      <Tile flush={true}>
+        <Text>No left padding</Text>
+      </Tile>
+      <Tile>
+        <Text>Small amount of left padding</Text>
+      </Tile>
+    </>
+  );
+};
+```
+
+### ToggleGroup
+
+##### Import
+
+```javascript
+import { ToggleGroup } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+type ToggleGroupProps = {
+  toggleType: 'checkboxList' | 'radioButtonList';
+  name: string;
+  label: string;
+  value?: string | string[];
+  onChange?: (value: string) => void | (value: string[]) => void;
+  validationMessage?: string;
+  required?: boolean;
+  tooltip?: string;
+  error?: boolean;
+  options: {
+    label: string;
+    value: string;
+    initialIsChecked?: boolean;
+    readonly?: boolean;
+    description?: string;
+  }[];
+  inline?: boolean;
+  variant?: 'default' | 'small';
+};
+
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `toggleType` | `'radioButtonList' \| 'checkboxList'` | `N/A` | The type of toggles that will be shown. `'checkboxList'` is a multi-select and `'radioButtonList'` is a single select | ; |
+| `name` | `string` | `N/A` | The unique identifier for the toggle group element. |
+| `label` | `string` | `N/A` | The label text to display for the toggle group element. |
+| `options` | `Array<{ label: string; value: string; initialIsChecked?: boolean; readonly?: boolean; description?: string }>` | `N/A` |  |
+| `value` | `string \| string[]` `(optional)` | `N/A` | The value of the toggle group. If `toggleType` is `'radioButtonList'`, this should be a `string`. If `toggleType` is `'checkboxList'` this should be an array of `string`s. |
+| `onChange` | `(value: string) => void \| (value: string[]) => void` `(optional)` | `N/A` | A function that is called with the new value or values when it is updated. If `toggleType` is `'radioButtonList'`, the function will be called with the `value` that is a `string`. If `toggleType` is `'checkboxList'` the function will be called with the `value` that is an array of `string`s. |
+| `required` | `boolean(optional)` | `false` | Determines if the required indicator should be displayed |
+| `tooltip` | `string` | `N/A` | Text that will appear in a tooltip next to the toggle group label. |
+| `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''` | The text to show if the input has an error. |
+| `inline` | `boolean(optional)` | `false` | Determines of the options are stacked vertically or share a line horizontally. |
+| `variant` | `'default' \| 'small'` `(optional)` | `default` | The size variation of the individual options. |
+
+##### Usage
+
+```javascript
+const options = [1, 2, 3, 4].map(n => ({
+  label: `Option ${n}`,
+  value: `${n}`,
+  initialIsChecked: n === 2,
+  readonly: false,
+  description: `This is option ${n}`,
+}));
+
+const Extension = () => {
+  return (
+    <ToggleGroup
+      name="toggle-checkboxes"
+      label="Toggle these things"
+      error={false}
+      options={options}
+      tooltip="Here's a secret tip."
+      validationMessage="Make sure you do the thing correctly."
+      required={false}
+      inline={false}
+      toggleType="checkboxList"
+      variant="default"
+    />
+  );
+};
+```