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

InputGroup

An input group combines an input component with addons.

usage: import { InputGroup, TextAddon, InputGroupContext, useInputGroupProps, useInputGroupAddonProps } from "@sharegate/orbit-ui";
sources: Github

Usage

An input group can combine an input with a start addon, an end addon or both. All Orbit's input can be combined, you can even make it work with a custom input.

Default

A default input group.

days

Editable example

<InputGroup>
    <TextInput aria-label="Elapsed days" />
    <Text>days</Text>
</InputGroup><InputGroup>
    <TextInput aria-label="Elapsed days" />
    <Text>days</Text>
</InputGroup>

Inputs

An input group can use any Orbit's input component.

https://

passengers

Editable example

<Stack>
    <InputGroup>
        <Text>https://</Text>
        <TextInput aria-label="Url" />
    </InputGroup>
    <InputGroup>
        <NumberInput aria-label="Number of passengers" />
        <Text>passengers</Text>
    </InputGroup>
</Stack><Stack>
    <InputGroup>
        <Text>https://</Text>
        <TextInput aria-label="Url" />
    </InputGroup>
    <InputGroup>
        <NumberInput aria-label="Number of passengers" />
        <Text>passengers</Text>
    </InputGroup>
</Stack>

Text addon

An input group can have a textual addon to offer additional hints. A text addon shouldn't replace a field label or a field description.

https://

.space

Editable example

<InputGroup>
    <Text>https://</Text>
    <TextInput aria-label="Url" />
    <Text>.space</Text>
</InputGroup><InputGroup>
    <Text>https://</Text>
    <TextInput aria-label="Url" />
    <Text>.space</Text>
</InputGroup>

An input group can have a menu addon.

Editable example

<InputGroup>
    <Autocomplete placeholder="Planets">
        <Item key="earth">Earth</Item>
        <Item key="mars">Mars</Item>
        <Item key="saturn">Saturn</Item>
        <Item key="jupiter">Jupiter</Item>
    </Autocomplete>
    <MenuTrigger>
        <IconButton aria-label="Select a galaxy" variant="secondary">
            <DisclosureArrow />
        </IconButton>
        <Menu aria-label="Galaxies">
            <Item key="andromeda">Andromeda</Item>
            <Item key="milky-way">Milky way</Item>
            <Item key="virgo">Virgo</Item>
        </Menu>
    </MenuTrigger>
</InputGroup><InputGroup>
    <Autocomplete placeholder="Planets">
        <Item key="earth">Earth</Item>
        <Item key="mars">Mars</Item>
        <Item key="saturn">Saturn</Item>
        <Item key="jupiter">Jupiter</Item>
    </Autocomplete>
    <MenuTrigger>
        <IconButton aria-label="Select a galaxy" variant="secondary">
            <DisclosureArrow />
        </IconButton>
        <Menu aria-label="Galaxies">
            <Item key="andromeda">Andromeda</Item>
            <Item key="milky-way">Milky way</Item>
            <Item key="virgo">Virgo</Item>
        </Menu>
    </MenuTrigger>
</InputGroup>

Select addon

An input group can have a select addon.

Editable example

<InputGroup>
    <TextInput aria-label="Elapsed time" />
    <Select defaultSelectedKey="days" aria-label="Period">
        <Item key="days">days</Item>
        <Item key="weeks">weeks</Item>
        <Item key="years">years</Item>
    </Select>
</InputGroup><InputGroup>
    <TextInput aria-label="Elapsed time" />
    <Select defaultSelectedKey="days" aria-label="Period">
        <Item key="days">days</Item>
        <Item key="weeks">weeks</Item>
        <Item key="years">years</Item>
    </Select>
</InputGroup>

Disabled

An input group can set as disabled the input and the addon(s).

Editable example

<InputGroup disabled>
    <TextInput aria-label="Duration" />
    <Select defaultSelectedKey="days">
        <Item key="days">days</Item>
        <Item key="weeks">weeks</Item>
        <Item key="years">years</Item>
    </Select>
</InputGroup><InputGroup disabled>
    <TextInput aria-label="Duration" />
    <Select defaultSelectedKey="days">
        <Item key="days">days</Item>
        <Item key="weeks">weeks</Item>
        <Item key="years">years</Item>
    </Select>
</InputGroup>

Readonly

An input group can set as readonly the input and the addon(s).

Editable example

<InputGroup readOnly>
    <TextInput aria-label="Elapsed time" />
    <Select defaultSelectedKey="days" aria-label="Period">
        <Item key="days">days</Item>
        <Item key="weeks">weeks</Item>
        <Item key="years">years</Item>
    </Select>
</InputGroup><InputGroup readOnly>
    <TextInput aria-label="Elapsed time" />
    <Select defaultSelectedKey="days" aria-label="Period">
        <Item key="days">days</Item>
        <Item key="weeks">weeks</Item>
        <Item key="years">years</Item>
    </Select>
</InputGroup>

Fluid

An input group can take the width of its container.

https://

.space

Editable example

<InputGroup fluid>
    <Text>https://</Text>
    <TextInput aria-label="Url" />
    <Text>.space</Text>
</InputGroup><InputGroup fluid>
    <Text>https://</Text>
    <TextInput aria-label="Url" />
    <Text>.space</Text>
</InputGroup>

Custom input

Any input implementing the InputGroupContext can integrate with an input group component. This is usually done by using the useInputGroupProps hook.

passengers

Editable example

function CustomInput(props) {
    const [inputGroupProps] = useInputGroupProps();

    return (
        <HtmlInput
            {...mergeProps(
                props,
                {
                    type: "text",
                    width: "225px",
                    height: 6,
                    border: "hsla(223, 12%, 87%, 1)",
                    style: {
                        borderTopLeftRadius: "var(--o-ui-input-border-radius)",
                        borderBottomLeftRadius: "var(--o-ui-input-border-radius)"
                    }
                },
                inputGroupProps
            )}
        />
    );
}

render(() => {
    return (
        <InputGroup>
            <CustomInput aria-label="Number of passengers" />
            <Text>passengers</Text>
        </InputGroup>
    );
});function CustomInput(props) {
    const [inputGroupProps] = useInputGroupProps();

    return (
        <HtmlInput
            {...mergeProps(
                props,
                {
                    type: "text",
                    width: "225px",
                    height: 6,
                    border: "hsla(223, 12%, 87%, 1)",
                    style: {
                        borderTopLeftRadius: "var(--o-ui-input-border-radius)",
                        borderBottomLeftRadius: "var(--o-ui-input-border-radius)"
                    }
                },
                inputGroupProps
            )}
        />
    );
}

render(() => {
    return (
        <InputGroup>
            <CustomInput aria-label="Number of passengers" />
            <Text>passengers</Text>
        </InputGroup>
    );
});

Custom addon

Any addon implementing the InputGroupContext can integrate with an input group component. This is usually done by using the useInputGroupAddonProps hook.

.space

Editable example

const FlexText = as(Flex, Text);

function CustomAddon({ children, ...props }) {
    const [inputGroupAddonProps] = useInputGroupAddonProps();

    return (
        <FlexText
            {...mergeProps(
                props,
                {
                    alignItems: "center",
                    height: 6,
                    border: "#ADACAC",
                    padding: "0px 10px",
                    style: {
                        borderTopRightRadius: "var(--o-ui-input-border-radius)",
                        borderBottomRightRadius: "var(--o-ui-input-border-radius)"
                    }
                },
                inputGroupAddonProps
            )}
        >
            {children}
        </FlexText>
    );
}

render(() => {
    return (
        <InputGroup>
            <TextInput aria-label="Url" />
            <CustomAddon>.space</CustomAddon>
        </InputGroup>
    );
});const FlexText = as(Flex, Text);

function CustomAddon({ children, ...props }) {
    const [inputGroupAddonProps] = useInputGroupAddonProps();

    return (
        <FlexText
            {...mergeProps(
                props,
                {
                    alignItems: "center",
                    height: 6,
                    border: "#ADACAC",
                    padding: "0px 10px",
                    style: {
                        borderTopRightRadius: "var(--o-ui-input-border-radius)",
                        borderBottomRightRadius: "var(--o-ui-input-border-radius)"
                    }
                },
                inputGroupAddonProps
            )}
        >
            {children}
        </FlexText>
    );
}

render(() => {
    return (
        <InputGroup>
            <TextInput aria-label="Url" />
            <CustomAddon>.space</CustomAddon>
        </InputGroup>
    );
});

API

InputGroup

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

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

TextAddon

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

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-

No Preview

InputGroup

Usage

Default

Inputs

Text addon

Menu addon

Select addon

Disabled

Readonly

Fluid

Custom input

Custom addon

API

InputGroup

TextAddon