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

TextInput

A text input allow a user to enter and edit a text.

usage: import { TextInput, SearchInput, PasswordInput } from "@sharegate/orbit-ui";
sources: Github

Usage

Default

A default text input.

Editable example

<TextInput placeholder="Where to?" /><TextInput placeholder="Where to?" />

Value

A text input can have a value.

Editable example

<TextInput defaultValue="Deep space" placeholder="Where to?" /><TextInput defaultValue="Deep space" placeholder="Where to?" />

Icon

A text input can contain an icon.

Editable example

<TextInput icon={<PencilMajorIcon />} placeholder="Where to?" /><TextInput icon={<PencilMajorIcon />} placeholder="Where to?" />

Button

A text input can contain a button.

Editable example

<TextInput button={<CrossButton aria-label="Clear value" />} placeholder="Where to?" /><TextInput button={<CrossButton aria-label="Clear value" />} placeholder="Where to?" />

Disabled

A text input can be disabled.

Editable example

<TextInput disabled placeholder="Where to?" /><TextInput disabled placeholder="Where to?" />

Readonly

A text input can be readonly.

Editable example

<TextInput readOnly defaultValue="Deep space" placeholder="Where to?" /><TextInput readOnly defaultValue="Deep space" placeholder="Where to?" />

Loading

A text input can show that it is currently loading data.

Editable example

<TextInput loading placeholder="Where to?" /><TextInput loading placeholder="Where to?" />

Fluid

A text input can take the width of its container.

Editable example

<TextInput fluid placeholder="Where to?" /><TextInput fluid placeholder="Where to?" />

Validation

A text input 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 input via the validationState prop.

The example below illustrates how one would validate if the user has entered a valid email.

Editable example

() => {
    const [value, setValue] = useState("me@spacex.com");

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

    const isValid = useMemo(
        () => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value),
        [value]
    );

    return (
        <TextInput
            validationState={isValid ? "valid" : "invalid"}
            placeholder="Enter your email"
            value={value}
            onValueChange={handleValueChange}
        />
    );
};() => {
    const [value, setValue] = useState("me@spacex.com");

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

    const isValid = useMemo(
        () => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value),
        [value]
    );

    return (
        <TextInput
            validationState={isValid ? "valid" : "invalid"}
            placeholder="Enter your email"
            value={value}
            onValueChange={handleValueChange}
        />
    );
};

Controlled

A text input value can be handled in controlled mode.

Editable example

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

    const handleValueChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    return <TextInput value={value} onValueChange={handleValueChange} placeholder="Where to?" />
};() => {
    const [value, setValue] = useState("");

    const handleValueChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    return <TextInput value={value} onValueChange={handleValueChange} placeholder="Where to?" />
};

SearchInput

A specialized text input for search input.

Editable example

<SearchInput placeholder="Where to?" /><SearchInput placeholder="Where to?" />

PasswordInput

A specialized text input which show / hide a password.

Editable example

<PasswordInput placeholder="What's your secret?" /><PasswordInput placeholder="What's your secret?" />

API

TextInput

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

Name Description Default

autoFocus

Whether or not the input should autoFocus on render.

numberfalsetrue

button

Button component rendered after the value.

ReactElement<any, string | JSXElementConstructor<any>>

fluid

Whether or not the input take up the width of its container.

false | true | ResponsiveValue<boolean>

icon

Icon component rendered before the value.

ReactElement<any, string | JSXElementConstructor<any>>

Whether or not to render a loader.

falsetrue

onValueChange

Called when the input value change.

(event: ChangeEvent<HTMLInputElement>, value: string) => void

`event`	React's original event.
`value`	The new input value.

type

The type of the input.

"text""search""tel""url""email""password"

validationState

Whether or not the input should display as "valid" or "invalid".

"valid""invalid"

value

A controlled value.

string

wrapperProps

Additional props to render on the wrapper element.

Partial<OmitInternalProps<InnerBoxProps, never> & RefAttributes<any>>

SearchInput

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

Name Description Default

autoFocus

Whether or not the input should autoFocus on render.

numberfalsetrue

button

Button component rendered after the value.

ReactElement<any, string | JSXElementConstructor<any>>

fluid

Whether or not the input take up the width of its container.

false | true | ResponsiveValue<boolean>

icon

Icon component rendered before the value.

ReactElement<any, string | JSXElementConstructor<any>>

Whether or not to render a loader.

falsetrue

onValueChange

Called when the input value change.

(event: SyntheticEvent<Element, Event>, value: string) => void

`event`	React's original event.
`value`	The new input value.

validationState

Whether or not the input should display as "valid" or "invalid".

"valid""invalid"

value

A controlled value.

string

wrapperProps

Additional props to render on the wrapper element.

Partial<OmitInternalProps<InnerBoxProps, never> & RefAttributes<any>>

PasswordInput

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

Name Description Default

autoFocus

Whether or not the input should autoFocus on render.

numberfalsetrue

button

Button component rendered after the value.

ReactElement<any, string | JSXElementConstructor<any>>

fluid

Whether or not the input take up the width of its container.

false | true | ResponsiveValue<boolean>

icon

Icon component rendered before the value.

ReactElement<any, string | JSXElementConstructor<any>>

Whether or not to render a loader.

falsetrue

onValueChange

Called when the input value change.

(event: ChangeEvent<HTMLInputElement>, value: string) => void

`event`	React's original event.
`value`	The new input value.

validationState

Whether or not the input should display as "valid" or "invalid".

"valid""invalid"

value

A controlled value.

string

wrapperProps

Additional props to render on the wrapper element.

Partial<OmitInternalProps<InnerBoxProps, never> & RefAttributes<any>>

No Preview

TextInput

Usage

Default

Value

Icon

Button

Disabled

Readonly

Loading

Fluid

Validation

Controlled

SearchInput

PasswordInput

API

TextInput

SearchInput

PasswordInput