GitHub
wwwwwwwwwwwwwwwwwww

Label

Label form elements with accessibility

yarnnpmbunpnpm
import { Input, Label, Switch, XStack, YStack } from 'tamagui'



export function LabelDemo() {

  return (

    <YStack padding="$3" minWidth={300} space="$4">

      <XStack alignItems="center" space="$4">

        <Label width={90} htmlFor="name">

          Name

        </Label>

        <Input flex={1} id="name" defaultValue="Nate Wienert" />

      </XStack>



      <XStack alignItems="center" space="$4">

        <Label width={90} htmlFor="notify">

          Notifications

        </Label>

        <Switch id="notify">

          <Switch.Thumb animation="quick" />

        </Switch>

      </XStack>

    </YStack>

  )

}

Features

  • Supports nested controls and custom controls.

  • Sizable and styleable inline.

  • Works on web with aria-labelledby.

Usage

import { Label } from 'tamagui'



export default () => (

  <>

    <Label htmlFor="name">Name</Label>

    <Input id="name" defaultValue="Nate Wienert" />

  </>

)

Accessibility

Use with Input or other form elements to automatically get correct labelling by id and aria-labelledby. You can also use the provided useLabelContext hook to build your own controls.

API Reference

Label

Labels extend Stack views inheriting all the Tamagui standard props, plus:

Props

  • htmlFor (required)

    string

    Matching to a Tamagui form element id.

  • unstyled

    boolean

    Removes all default Tamagui styles.

    • Previous

    Input & TextArea

    Next

    Progress

    Edit this page on GitHub.