Label

Requires:
@ray-js/ray≥0.5.10

Description

Label component to improve form usability: link a control via htmlFor, or wrap a control to enlarge the clickable area.

Props

PropertyTypeRequiredDefaultDescription
htmlForstringNo-ID of the bound control

Examples

Basic usage

import React from 'react';
import { View, Checkbox, Text, Label } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Label>
        <Checkbox />
        <Text style={{ marginLeft: '8px' }}>Clicking the text also selects</Text>
      </Label>
    </View>
  );
}

htmlFor binding

import React from 'react';
import { View, Checkbox, Radio, Switch, Text, Label } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '16px' }}>
        <Checkbox id="checkbox1" />
        <Label htmlFor="checkbox1">
          <Text style={{ marginLeft: '8px' }}>Control Checkbox via htmlFor</Text>
        </Label>
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Radio id="radio1" />
        <Label htmlFor="radio1">
          <Text style={{ marginLeft: '8px' }}>Control Radio via htmlFor</Text>
        </Label>
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Switch id="switch1" />
        <Label htmlFor="switch1">
          <Text style={{ marginLeft: '8px' }}>Control Switch via htmlFor</Text>
        </Label>
      </View>
    </View>
  );
}