---
name: Label
menu: Components
route: /components/label
---

import { Playground, Props } from 'docz'
import Label from './'
import Select from '../select/'

# Label

## Import
`import { Label } from '@blasterjs/core'`

## Basic usage

<Playground>
    <Label>
        What is the airspeed velocity of an unladen swallow?
        <input type="text" />
    </Label>
</Playground>

<Playground>
    <Label htmlFor="swallow">What do you mean?</Label>
    <Select id="swallow">
        <option>African</option>
        <option>European</option>
    </Select>
</Playground>


## PropTypes

| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `TYPOGRAPHY` | Style Prop |  |  | see [Style Props](/style-props) |
| `FLEX_ITEM` | Style Prop |  |  | see [Style Props](/style-props) |
| htmlFor | string | no | | passed down to nested `label` element |


## Theming

### Schema
```
{
  fontSizes: {
    fontSize
  },
  overrides: css`
    ...
  `
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/label)
- [Learn more about themeing](/blaster-theme)