Forms
To create forms, Sancho exports multiple components:
- InputGroup: A useful helper for providing labels, helper text, and errors for the other input components. Composes the Label component.
- Input: The standard input component for regular text input.
- TextArea: A textarea version of the Input component.
- Label: Label for input types.
- Select: Select menu.
- Check: Used for checkbox or radio style inputs.
You'll typically want to wrap you input elements with InputGroup
to ensure proper accessibility, like in the examples below.
Input
This field is required
/** @jsx jsx */ function Example() { return ( <div css={{ maxWidth: "350px" }}> <InputGroup label="Email address"> <Input placeholder="ben.mcmahen@gmail.com" /> </InputGroup> <InputGroup label="Email address"> <Input disabled placeholder="ben.mcmahen@gmail.com" /> </InputGroup> <InputGroup error="This field is required" label="Email address"> <Input placeholder="ben.mcmahen@gmail.com" /> </InputGroup> </div> ); }
Show Code
TextArea
Please provide a brief description of yourself. This will go on your profile.
Please provide a brief description of yourself. This will go on your profile.
This field is required
Please provide a brief description of yourself. This will go on your profile./** @jsx jsx */ function Example() { return ( <div css={{ maxWidth: "350px" }}> <InputGroup label="Example textarea" helpText="Please provide a brief description of yourself. This will go on your profile." > <TextArea placeholder="Something about me" /> </InputGroup> <InputGroup label="Example textarea" helpText="Please provide a brief description of yourself. This will go on your profile." > <TextArea disabled placeholder="Something about me" /> </InputGroup> <InputGroup error="This field is required" label="Example textarea" helpText="Please provide a brief description of yourself. This will go on your profile." > <TextArea placeholder="Something about me" /> </InputGroup> </div> ); }
Show Code
Select
This field is required
/** @jsx jsx */ function Example() { return ( <div css={{ maxWidth: "350px" }}> <InputGroup label="Gender"> <Select> <option>Male</option> <option>Female</option> <option>Other</option> </Select> </InputGroup> <InputGroup label="Gender"> <Select disabled> <option>Male</option> <option>Female</option> <option>Other</option> </Select> </InputGroup> <InputGroup error="This field is required" label="Gender"> <Select> <option>Male</option> <option>Female</option> <option>Other</option> </Select> </InputGroup> </div> ); }
Show Code
Check
You must select a gender
/** @jsx jsx */ function Example() { return ( <div css={{ maxWidth: "350px" }}> <InputGroup label="Gender"> <div> <Check disabled label="Male" checked /> <Check label="Female" /> <Check label="Other" /> </div> </InputGroup> <InputGroup error="You must select a gender" label="Gender"> <div> <Check disabled label="Male" checked /> <Check label="Female" /> <Check label="Other" /> </div> </InputGroup> </div> ); }
Show Code
Combined example
/** @jsx jsx */ function Example() { return ( <form className="Form-basics"> <InputGroup label="Email address *"> <Input type="email" required placeholder="name@example.com" /> </InputGroup> <InputGroup label="About yourself" helpText="Please provide a brief description of yourself. This information will be available to the public." > <TextArea placeholder="I love dogs and peanut butter" /> </InputGroup> <InputGroup label="Gender"> <Select> <option>Female</option> <option>Male</option> <option>Other</option> </Select> </InputGroup> <InputGroup label="Do you accept our terms?"> <Check label="Sure, whatevs" /> </InputGroup> </form> ); }
Show Code
Different sizes
Input elements support three different sizes: lg
, md
and sm
.
/** @jsx jsx */ function Example() { return ( <form className="Form-basics"> <InputGroup label="Email address"> <Input inputSize="lg" type="email" placeholder="name@example.com" /> </InputGroup> <InputGroup label="About yourself" helpText="Please provide a brief description of yourself. This information will be available to the public." > <TextArea inputSize="lg" /> </InputGroup> <InputGroup label="Gender"> <Select inputSize="lg"> <option>Female</option> <option>Male</option> <option>Other</option> </Select> </InputGroup> </form> ); }
Show Code
Hide labels
You can hide labels while maintaining accessible form elements using the hideLabel
prop.
Sign in to Watershed
/** @jsx jsx */ function Example() { const theme = useTheme(); return ( <div css={{ maxWidth: "400px" }}> <Layer> <Toolbar css={{ justifyContent: "center", borderBottom: `1px solid ${theme.colors.border.default}` }} > <Text gutter={false} variant="h4"> Sign in to Watershed </Text> </Toolbar> <form css={{ padding: theme.spaces.lg }}> <InputGroup hideLabel label="Email address"> <Input inputSize="lg" type="email" placeholder="Email" /> </InputGroup> <InputGroup hideLabel label="Password"> <Input inputSize="lg" type="password" placeholder="Password" /> </InputGroup> <Button css={{ marginTop: "1rem" }} size="lg" component="button" type="submit" block intent="primary" > Sign in </Button> </form> </Layer> </div> ); }
Show Code
API
InputGroup
idstring
label*string
A label is required for accessibility purposes. Use `hideLabel` to hide it.
hideLabelboolean
Visually hide the label. It remains accessible to screen readers.
errorReactNode
helpTextstring
Optional help text
childrenReactNode
A single input element
cssInterpolationWithTheme<any>
InputBase
inputSizeInputSize
The size of the input element
cssInterpolationWithTheme<any>
Input
inputSizeInputSize
The size of the input element
cssInterpolationWithTheme<any>
TextArea
inputSizeInputSize
The size of the textarea element
cssInterpolationWithTheme<any>
Label
hideboolean
htmlFor*string
cssInterpolationWithTheme<any>
Select
inputSizeInputSize
The size of the select box
cssInterpolationWithTheme<any>
Check
label*string
A label for the checkmark.
cssInterpolationWithTheme<any>