-
Notifications
You must be signed in to change notification settings - Fork 4
Open
Labels
Description
there's probably some that i missed and overlooked but here are my initial thoughts. A
component encompasses a group of input elements - this includes everything in #31 . Check out ant.design for inspiration.There are multiple types of form layouts.. we'll focus on vertical ones. Within vertical forms, you need to account for either
1.
Label Name [ your choice of input ]
2.
Label Name
[ your choise of input ]
The design system spec only accounts for the 2nd choice. We should add the 1st choice as well.
inline forms (e.g. two text inputs side by side) can be done with Flexbox by dev
Components
- just include top parent form level styling like typography
- <Form.Item> an item that includes a label name and the input
- <Form.Label> the label for the Form Item
- <Form.Text> helper text (below input)
<Form.Item />
props
- row: bool - if true, this would choose choice 1, defaults to choice 2
- disabled? idk how you would put disabled props into children
- required? idk how you would put disabled props
- optional? idk how you would put disabled props
<Form.Label/>
- for - the id of the input (look at reactstrap)
- required
- optional
<Form.Text>
props
- color
Example
<Form>
<Form.Item row>
<Form.Label required> Favorite Color </Form.Label>
<TextArea />
<Form.Text>some description </Form.Text>
</Form.Item>
// inline
<Flex>
<Box flex={1}>
<Form.Label required> Favorite Car </Form.Label>
<Dropownd asdfasdf />
<Form.Text>some description </Form.Text>
</Box>
<Box flex={1}>
<Form.Label required> Favorite shoe </Form.Label>
<TextField />
<Form.Text>some description </Form.Text>
</Box>
<Flex>
<Form.Item>
<Button>Submit</Button>
<Form.Item>
</Form>