Label

An HTML label component. Should be used with Input.

Props

className

String | undefined

Pass it any class to extend styling.

color

String | undefined

htmlFor

String | undefined

width

String | undefined

float

Boolean | undefined

Passed from Floating and not meant to be used explicitely.

Basic usage

Label above input:

Name

 
<Flex direction="column">
  <Flex.Item>
    <Label className="custom-class" htmlFor="name2">
      Name
    </Label>
  </Flex.Item>
  <Flex.Item>
    <Input
      className="custom-class"
      id="name2"
      name="name2"
      placeholder="John Smith"
      border={1}
      width="100%"
    />
  </Flex.Item>
</Flex>

Label next to input:

Name

 
<Flex justifyContent="space-around" alignItems="center">
  <Flex.Item flex="1 1 5%">
    <Label className="custom-class" htmlFor="name2" color="tomato">
      Name
    </Label>
  </Flex.Item>
  <Flex.Item flex="1 1 90%">
    <Input
      className="custom-class"
      id="name2"
      name="name2"
      placeholder="John Smith"
      color="tomato"
      border={1}
      borderBottom
      width="100%"
    />
  </Flex.Item>
</Flex>