Skip to content

Create <Form /> component #55

@tko22

Description

@tko22

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions