Label

import * as Label from '@radix-ui/react-label';
import './styles.css';

export default () => (
  <div style={{ display: 'flex', padding: '0 20px', flexWrap: 'wrap', gap: 15, alignItems: 'center' }}>
    <Label.Root className="Label" htmlFor="firstName">
      First name
    </Label.Root>
    <input className="Input" type="text" id="firstName" defaultValue="Pedro Duarte" />
  </div>
);

import * as Label from '@radix-ui/react-label';
import './styles.css';

export default () => (
  <Label.Root className="Label">
    Email
    <input className="Input" type="email" />
  </Label.Root>
);

import * as Label from '@radix-ui/react-label';
import * as Checkbox from '@radix-ui/react-checkbox';
import { CheckIcon } from '@radix-ui/react-icons';

export default () => (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <Checkbox.Root id="terms" defaultChecked>
      <Checkbox.Indicator>
        <CheckIcon />
      </Checkbox.Indicator>
    </Checkbox.Root>
    <Label.Root htmlFor="terms" style={{ paddingLeft: 8 }}>
      Accept terms and conditions
    </Label.Root>
  </div>
);

import * as Label from '@radix-ui/react-label';
import * as RadioGroup from '@radix-ui/react-radio-group';

export default () => (
  <RadioGroup.Root defaultValue="1">
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <RadioGroup.Item value="1" id="r1">
        <RadioGroup.Indicator />
      </RadioGroup.Item>
      <Label.Root htmlFor="r1" style={{ paddingLeft: 8 }}>
        Option 1
      </Label.Root>
    </div>
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <RadioGroup.Item value="2" id="r2">
        <RadioGroup.Indicator />
      </RadioGroup.Item>
      <Label.Root htmlFor="r2" style={{ paddingLeft: 8 }}>
        Option 2
      </Label.Root>
    </div>
  </RadioGroup.Root>
);