Form

Overview

Form is a view which provides a way to collect different types information

Plugin Manifest

To use this view, entrypoint with type "view" is required

Example

[[entrypoint]]
id = 'main'
name = 'Main'
path = 'src/main.tsx'
type = 'view'
description = 'Description of a Form view'

API Reference

Form

Form is a root component that contains a set of input field of various types. Use it to allow users to provide data

Example

src/main.tsx

import { ReactElement } from 'react';
import { Action, ActionPanel, Form } from "@project-gauntlet/api/components";

export default function MainExample(): ReactElement {
    return (
        <Form
            actions={
                <ActionPanel>
                    <Action label="Submit" onAction={() => {}}/>
                </ActionPanel>
            }
        >
            <Form.TextField label="First Name" value="Cassian" onChange={value => {
                console.log(`First Name: ${value}`)
            }}/>
            <Form.TextField label="Last Name" value="Andor" onChange={value => {
                console.log(`Last Name: ${value}`)
            }}/>
            <Form.Select
                label="Species"
                value="human"
                onChange={value => {
                console.log(`Last Name: ${value}`)
            }}>
                <Form.Select.Item value="human">Human</Form.Select.Item>
                <Form.Select.Item value="jawa">Jawa</Form.Select.Item>
                <Form.Select.Item value="hutt">Hutt</Form.Select.Item>
                <Form.Select.Item value="twi'lek">Twi'lek</Form.Select.Item>
            </Form.Select>

            <Form.Separator/>

            <Form.DatePicker
                label="Date"
                value={"2024-03-22"}
                onChange={value => {
                    console.log(`value: ${value}`)
                }}
            />
            <Form.Checkbox
                title="I acknowledge the Galactic Code and agree to abide by its regulations."
                value={false}
                onChange={value => {
                    console.log(`terms of service: ${value}`)
                }}
            />
        </Form>
    );
};

gauntlet.toml

[[entrypoint]]
id = 'main'
name = 'Main'
path = 'src/main.tsx'
type = 'view'
description = ''

Props

Name	Is Required	Type	Description
isLoading	Optional	boolean	If "true" loading bar is shown above content
actions	Optional	<ActionPanel/>	Allows to define an Action Panel for this view. Every root component has such property

Children components (order-sensitive)

Available order-sensitive React children components. The order in which these elements are be placed in code will be reflected in UI

Name	React Component Type	Amount
TextField	<TextField/>	Zero or More
PasswordField	<PasswordField/>	Zero or More
Checkbox	<Checkbox/>	Zero or More
DatePicker	<DatePicker/>	Zero or More
Select	<Select/>	Zero or More
Separator	<Separator/>	Zero or More

Form.TextField

Text field input

Example

src/text-field.tsx

import { ReactElement } from 'react';
import { Form } from "@project-gauntlet/api/components";

export default function TextFieldExample(): ReactElement {
    return (
        <Form>
            <Form.TextField
                label="Homeworld"
                onChange={value => {
                    console.log(`homeworld: ${value}`)
                }}
            />
        </Form>
    );
};

gauntlet.toml

[[entrypoint]]
id = 'text-field'
name = 'Text Field'
path = 'src/text-field.tsx'
type = 'view'
description = ''

Props

Name	Is Required	Type	Description
label	Optional	string	Text displayed in UI to the left of the input field itself
value	Optional	string	String value of the field. Can be used to implement controlled form
onChange	Optional	() => void	Function that is called when the value of the text value in field was changed

Form.PasswordField

Text field input with hidden value

Example

src/password-field.tsx

import { ReactElement } from 'react';
import { Form } from "@project-gauntlet/api/components";

export default function PasswordFieldExample(): ReactElement {
    return (
        <Form>
            <Form.PasswordField label="Password" value="K'lor'slug"/>
        </Form>
    );
};

gauntlet.toml

[[entrypoint]]
id = 'password-field'
name = 'Password Field'
path = 'src/password-field.tsx'
type = 'view'
description = ''

Props

Name	Is Required	Type	Description
label	Optional	string	Text displayed in UI to the left of the input field itself
value	Optional	string	String value of the field. Can be used to implement controlled form
onChange	Optional	() => void	Function that is called when the value of the text value in field was changed

Form.Checkbox

Text field input

Example

src/checkbox.tsx

import { ReactElement } from 'react';
import { Form } from "@project-gauntlet/api/components";

export default function CheckboxExample(): ReactElement {
    return (
        <Form>
            <Form.Checkbox
                label="Have heard about"
                title="The Tragedy of Darth Plagueis the Wise"
                value={true}
                onChange={value => {
                    console.log(`value: ${value}`)
                }}
            />
        </Form>
    );
};

gauntlet.toml

[[entrypoint]]
id = 'checkbox'
name = 'Checkbox'
path = 'src/checkbox.tsx'
type = 'view'
description = ''

Props

Name	Is Required	Type	Description
label	Optional	string	Text displayed in UI to the left of the input field itself
value	Optional	string	String value of the field. Can be used to implement controlled form
onChange	Optional	() => void	Function that is called when the value of the text value in field was changed

Form.DatePicker

Date Picker is a type of form input that produces date value represented as a string in "YYYY-MM-DD" format

Example

src/date-picker.tsx

import { ReactElement } from 'react';
import { Form } from "@project-gauntlet/api/components";

export default function DatePickerExample(): ReactElement {
    return (
        <Form>
            <Form.DatePicker
                label="Date"
                value="2024-03-22"
                onChange={value => {
                    console.log(`value: ${value}`)
                }}
            />
        </Form>
    );
};

gauntlet.toml

[[entrypoint]]
id = 'date-picker'
name = 'Date Picker'
path = 'src/date-picker.tsx'
type = 'view'
description = ''

Props

Name	Is Required	Type	Description
label	Optional	string	Text displayed in UI to the left of the date picker itself
value	Optional	string	Value of the Date Picker. Can be used to implement controlled form
onChange	Optional	() => void	Function that is called when the value of the data picker was changed

Form.Select

Field that allows to select a single value in a predefined list

Example

src/select.tsx

import { ReactElement } from 'react';
import { Form } from "@project-gauntlet/api/components";

export default function SelectExample(): ReactElement {
    return (
        <Form>
            <Form.Select label="Species" value="human">
                <Form.Select.Item value="human">Human</Form.Select.Item>
                <Form.Select.Item value="jawa">Jawa</Form.Select.Item>
                <Form.Select.Item value="hutt">Hutt</Form.Select.Item>
                <Form.Select.Item value="twi'lek">Twi'lek</Form.Select.Item>
                <Form.Select.Item value="wookie">Wookie</Form.Select.Item>
                <Form.Select.Item value="kaminoan">Kaminoan</Form.Select.Item>
            </Form.Select>
        </Form>
    );
};

gauntlet.toml

[[entrypoint]]
id = 'select'
name = 'Select'
path = 'src/select.tsx'
type = 'view'
description = ''

Props

Name	Is Required	Type	Description
label	Optional	string	Text displayed in UI to the left of the input itself
value	Optional	string	String value of the field. Can be used to implement controlled form
onChange	Optional	() => void	Function that is called when the selected item was changed

Children components (order-sensitive)

Available order-sensitive React children components. The order in which these elements are be placed in code will be reflected in UI

Name	React Component Type	Amount
Item	<SelectItem/>	Zero or More

Form.Select.Item

Predefined item that can be selected from the select form input list

Props

Name	Is Required	Type	Description
value	Required	string	Internal value of the selected item

Children components (order-sensitive)

Available order-sensitive React children components. The order in which these elements are be placed in code will be reflected in UI

Name	React Component Type	Amount
	string	Zero or More

Form.Separator

Horizontal line to visually separate list of field

Example

src/separator.tsx

import { ReactElement } from 'react';
import { Form } from "@project-gauntlet/api/components";

export default function SeparatorExample(): ReactElement {
    return (
        <Form>
            <Form.TextField label="Canon"/>

            <Form.Separator/>

            <Form.TextField label="Legends"/>
        </Form>
    );
};

gauntlet.toml

[[entrypoint]]
id = 'separator'
name = 'Separator'
path = 'src/separator.tsx'
type = 'view'
description = ''