Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

Field

A field add a label and a message to an input. They are typically used in forms and dialogs.

usage: import { Field, GroupField, Label, HelpMessage, ErrorMessage, ValidMessage, FieldContext, useFieldInputProps } from "@sharegate/orbit-ui";
sources: Github

Guidelines

Accessibility

When combined with a form element, a field component follows the WAI specifications for forms.

Usage

A field can be composed of Orbit input components or integrate with custom inputs from your app.

Input

For non-group input use a Field component.

Space ID

Your space id is a 9-digit number available on the top right corner of your membership card.

Editable example

<Field>
    <Label>Space ID</Label>
    <TextInput placeholder="999-999-999" />
    <HelpMessage>
        Your space id is a 9-digit number available on the top right corner of your membership card.
    </HelpMessage>
</Field><Field>
    <Label>Space ID</Label>
    <TextInput placeholder="999-999-999" />
    <HelpMessage>
        Your space id is a 9-digit number available on the top right corner of your membership card.
    </HelpMessage>
</Field>

Group input

When the input is a group, use a GroupField instead of a Field.

Your favorite galaxies?

Milky WayAndromedaMedusa

You must at least have travelled once to the galaxy.

Your favorite galaxies?

Milky WayAndromedaMedusa

You must at least have travelled once to the galaxy.

Editable example

<Inline alignX="start" gap={13}>
    <GroupField>
        <Label>Your favorite galaxies?</Label>
        <CheckboxGroup>
            <Checkbox value="milky-way">Milky Way</Checkbox>
            <Checkbox value="andromeda">Andromeda</Checkbox>
            <Checkbox value="medusa">Medusa</Checkbox>
        </CheckboxGroup>
        <HelpMessage>You must at least have travelled once to the galaxy.</HelpMessage>
    </GroupField>
    <GroupField>
        <Label>Your favorite galaxies?</Label>
        <CheckboxGroup orientation="vertical">
            <Checkbox value="milky-way">Milky Way</Checkbox>
            <Checkbox value="andromeda">Andromeda</Checkbox>
            <Checkbox value="medusa">Medusa</Checkbox>
        </CheckboxGroup>
        <HelpMessage>You must at least have travelled once to the galaxy.</HelpMessage>
    </GroupField>
</Inline><Inline alignX="start" gap={13}>
    <GroupField>
        <Label>Your favorite galaxies?</Label>
        <CheckboxGroup>
            <Checkbox value="milky-way">Milky Way</Checkbox>
            <Checkbox value="andromeda">Andromeda</Checkbox>
            <Checkbox value="medusa">Medusa</Checkbox>
        </CheckboxGroup>
        <HelpMessage>You must at least have travelled once to the galaxy.</HelpMessage>
    </GroupField>
    <GroupField>
        <Label>Your favorite galaxies?</Label>
        <CheckboxGroup orientation="vertical">
            <Checkbox value="milky-way">Milky Way</Checkbox>
            <Checkbox value="andromeda">Andromeda</Checkbox>
            <Checkbox value="medusa">Medusa</Checkbox>
        </CheckboxGroup>
        <HelpMessage>You must at least have travelled once to the galaxy.</HelpMessage>
    </GroupField>
</Inline>

Required

A field can show a required state.

Space ID

Your space id is a 9-digit number available at the top right corner of your membership card.

Editable example

<Field required>
    <Label>Space ID</Label>
    <TextInput placeholder="999-999-999" />
    <HelpMessage>
        Your space id is a 9-digit number available at the top right corner of your membership card.
    </HelpMessage>
</Field><Field required>
    <Label>Space ID</Label>
    <TextInput placeholder="999-999-999" />
    <HelpMessage>
        Your space id is a 9-digit number available at the top right corner of your membership card.
    </HelpMessage>
</Field>

Disabled

A field can be disabled.

Space ID

Your space id is a 9-digit number available the top right corner of your membership card.

Editable example

<Field disabled>
    <Label>Space ID</Label>
    <TextInput placeholder="999-999-999" />
    <HelpMessage>
        Your space id is a 9-digit number available the top right corner of your membership card.
    </HelpMessage>
</Field><Field disabled>
    <Label>Space ID</Label>
    <TextInput placeholder="999-999-999" />
    <HelpMessage>
        Your space id is a 9-digit number available the top right corner of your membership card.
    </HelpMessage>
</Field>

Fluid

A field can take the width of its container.

Space ID

Your space id is a 9-digit number available the top right corner of your membership card.

Editable example

<Field fluid>
    <Label>Space ID</Label>
    <TextInput placeholder="999-999-999" />
    <HelpMessage>
        Your space id is a 9-digit number available the top right corner of your membership card.
    </HelpMessage>
</Field><Field fluid>
    <Label>Space ID</Label>
    <TextInput placeholder="999-999-999" />
    <HelpMessage>
        Your space id is a 9-digit number available the top right corner of your membership card.
    </HelpMessage>
</Field>

Validation

A field can display a validation state to communicate to the user whether the current value is valid or invalid. Implement your own validation logic in your app and pass either "valid" or "invalid" to the field via the validationState prop.

When valid or invalid, a field can display a specific message by declaring either a ValidMessage or an ErrorMessage component.

The example below illustrates how one would validate if the user has entered a valid email and display a message matching the current validation state.

Editable example

() => {
    const [value, setValue] = useState("");

    const validationState = useMemo(() => {
        return value === ""
            ? null
            : /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value)
            ? "valid"
            : "invalid";
    }, [value]);

    const handleChange = useCallback(
        event => {
            setValue(event.target.value);
            console.log(event.target.value);
        },
        [setValue]
    );

    return (
        <Field validationState={validationState}>
            <Label>Email</Label>
            <TextInput placeholder="a@a.com" value={value} onChange={handleChange} />
            <ErrorMessage>This is an invalid email address.</ErrorMessage>
            <ValidMessage>A confirmation email is on it's way!</ValidMessage>
        </Field>
    );
};() => {
    const [value, setValue] = useState("");

    const validationState = useMemo(() => {
        return value === ""
            ? null
            : /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value)
            ? "valid"
            : "invalid";
    }, [value]);

    const handleChange = useCallback(
        event => {
            setValue(event.target.value);
            console.log(event.target.value);
        },
        [setValue]
    );

    return (
        <Field validationState={validationState}>
            <Label>Email</Label>
            <TextInput placeholder="a@a.com" value={value} onChange={handleChange} />
            <ErrorMessage>This is an invalid email address.</ErrorMessage>
            <ValidMessage>A confirmation email is on it's way!</ValidMessage>
        </Field>
    );
};

Custom input

Any input implementing the FieldContext can integrate with a field component. This is usually done by using the useFieldInputProps hook.

Short input

Editable example

function CustomInput(props) {
    const [{ validationState, ...fieldProps }] = useFieldInputProps();

    return (
        <HtmlInput
            {...props}
            {...fieldProps}
            type="text"
            width={{
                base: "50%",
                sm: "20%"
            }}
            border={validationState === "invalid" ? "alias-alert" : "black"}
        />
    );
}

render(() => {
    const [value, setValue] = useState("");

    const isValid = value.length < 2;

    const handleChange = useCallback(
        event => {
            setValue(event.target.value);
            console.log(event.target.value);
        },
        [setValue]
    );

    return (
        <Field validationState={isValid ? "valid" : "invalid"}>
            <Label>Short input</Label>
            <CustomInput value={value} onChange={handleChange} />
            <ErrorMessage>Input is too long.</ErrorMessage>
        </Field>
    );
});function CustomInput(props) {
    const [{ validationState, ...fieldProps }] = useFieldInputProps();

    return (
        <HtmlInput
            {...props}
            {...fieldProps}
            type="text"
            width={{
                base: "50%",
                sm: "20%"
            }}
            border={validationState === "invalid" ? "alias-alert" : "black"}
        />
    );
}

render(() => {
    const [value, setValue] = useState("");

    const isValid = value.length < 2;

    const handleChange = useCallback(
        event => {
            setValue(event.target.value);
            console.log(event.target.value);
        },
        [setValue]
    );

    return (
        <Field validationState={isValid ? "valid" : "invalid"}>
            <Label>Short input</Label>
            <CustomInput value={value} onChange={handleChange} />
            <ErrorMessage>Input is too long.</ErrorMessage>
        </Field>
    );
});

API

Field

usage: import { Field } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
fluid	Whether or not the field take up the width of its container. false \| true \| ResponsiveValue<boolean>	-
required	Whether or not the field show a required state. falsetrue	-
validationState	Whether the field should display as "valid" or "invalid". "valid""invalid"	-

GroupField

usage: import { GroupField } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
fluid	Whether or not the field take up the width of its container. false \| true \| ResponsiveValue<boolean>	-
required	Whether or not the field show a required state. falsetrue	-
validationState	Whether the field should display as "valid" or "invalid". "valid""invalid"	-

Label

usage: import { Label } from "@sharegate/orbit-ui";
extends: Label
StyleProps

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
required	Whether or not the label show a required state. falsetrue	-

HelpMessage

usage: import { HelpMessage } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
fluid	Whether or not the field take up the width of its container. false \| true \| ResponsiveValue<boolean>	-

ErrorMessage

usage: import { ErrorMessage } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
fluid	Whether or not the field take up the width of its container. false \| true \| ResponsiveValue<boolean>	-

ValidMessage

usage: import { ValidMessage } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
fluid	Whether or not the field take up the width of its container. false \| true \| ResponsiveValue<boolean>	-

No Preview

Field

Guidelines

Accessibility

Usage

Input

Group input

Required

Disabled

Fluid

Validation

Custom input

API

Field

GroupField

Label

HelpMessage

ErrorMessage

ValidMessage