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 .

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

Themeable

Accepts Text props.

Use the inputLabel key in ThemeProvider to customize the default properties of this component.

controlsstring

The id of the input to control. Compatible with all Tapestry-React form components.

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

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

Props

PreviousInput.InputField NextNumberField