Input.InputLabel

View Source

Provides accessibility as well as usability improvements for mouse users by allowing the user to click the component to focus the respective control. This mimics the browsers native label tag, but allows use with custom components like .

Copy

Edit

render(
  <StackView spacing={1}>
    <Input.InputLabel controls="my-select-menu">My Label</Input.InputLabel>
    <Select id="my-select-menu">
      <Select.Option value="one">One</Select.Option>
      <Select.Option value="two">Two</Select.Option>
      <Select.Option value="three">Three</Select.Option>
    </Select>
  </StackView>
)

render(
  <StackView spacing={1}>
    <Input.InputLabel controls="my-select-menu">My Label</Input.InputLabel>
    <Select id="my-select-menu">
      <Select.Option value="one">One</Select.Option>
      <Select.Option value="two">Two</Select.Option>
      <Select.Option value="three">Three</Select.Option>
    </Select>
  </StackView>
)

Props

controlsstring

The id of the input to control. Compatible with all UI kit form components.

state'warning' | 'error' | 'success'

The current state of the label. Should match corresponding Input’s state prop.

Props

PreviousInput.InputField NextNumberField