Label

Un Label proporciona un texto accesible que describe un control de formulario. Admite distintos tamaños y grosores, puede marcarse como obligatorio o deshabilitado, y puede posicionarse respecto al control que envuelve.

Uso

<script>
	import { Label, TextBox } from 'fluentui-svelte';
</script>

<Label label="Email"><TextBox /></Label>

Tamaño

Usa la propiedad size para controlar el tamaño del texto de la etiqueta. Valores posibles: 'small', 'medium', 'large'.

<Label size="small" label="Small"><TextBox /></Label>
<Label size="medium" label="Medium"><TextBox /></Label>
<Label size="large" label="Large"><TextBox /></Label>

Grosor

Usa la propiedad weight para alternar entre una etiqueta regular y una semibold.

<Label weight="regular" label="Regular"><TextBox /></Label>
<Label weight="semibold" label="Semibold"><TextBox /></Label>

Posición de la etiqueta

Usa la propiedad labelPosition para colocar el texto de la etiqueta respecto al control que envuelve. Valores posibles: 'before', 'after', 'above', 'below'.

<Label labelPosition="before" label="Before"><TextBox /></Label>
<Label labelPosition="after" label="After"><TextBox /></Label>
<Label labelPosition="above" label="Above"><TextBox /></Label>
<Label labelPosition="below" label="Below"><TextBox /></Label>

Obligatorio

Pasa un objeto required para marcar la etiqueta como obligatoria y mostrar un indicador, que por defecto es un asterisco.

<Label label="Email" required={{ message: 'Required field' }}><TextBox required /></Label>

Tooltip

Pasa tooltipContent, como texto, snippet o componente, para mostrar más información sobre el campo en un tooltip desde un badge tras el texto de la etiqueta. El badge es un botón con el nombre de la etiqueta, así que también llegan a él quienes usan el teclado o un lector de pantalla; tooltipBadge sustituye su icono de información y tooltipButtonAttributes su aria-label. No se puede entrar en un tooltip, así que no pongas enlaces ni botones en él.

<Label
  label="Bank"
  labelPosition="above"
  required={{ message: 'Required field' }}
  tooltipContent="The bank that holds the account the payments come from."
>
  <Dropdown placeholder="Bank Name">
    <DropdownOption value="pichincha">Banco Pichincha</DropdownOption>
    <DropdownOption value="guayaquil">Banco Guayaquil</DropdownOption>
  </Dropdown>
</Label>
<Label
  label="IBAN"
  labelPosition="above"
  tooltipBadge={QuestionCircleRegular}
  tooltipContent="The international number of the account, as your bank prints it."
>
  <TextBox placeholder="EC00 0000 0000 0000" />
</Label>

Etiquetar controles de formulario

Un control dentro de Label no necesita id ni for. El texto propio de un Checkbox, RadioButton o ToggleSwitch dentro de Label no se renderiza: el Label da nombre al control. Un <label for> nativo fuera de un Label da nombre a un picker (Dropdown, TagPicker, DatePicker, TimePicker, CalendarDatePicker) solo cuando la página se hidrata, porque el picker lo lee de la página: al renderizar en el servidor, usa Label o pasa aria-labelledby. Un campo con id propio lo conserva: cuando el texto va antes del campo (labelPosition 'before' o 'above', el valor por defecto), pasa también ese id a for, o el label que escribe el servidor no apunta a ningún campo hasta que la página se hidrata.

<Label label="Accept terms" labelPosition="after"><Checkbox /></Label>
<Label label="Email updates" labelPosition="after"><ToggleSwitch /></Label>
<Label label="Standard plan" labelPosition="after"><RadioButton name="plan" value="standard" /></Label>
<Label label="Country" labelPosition="above">
  <Dropdown>
    <DropdownOption value="bo">Bolivia</DropdownOption>
    <DropdownOption value="ec">Ecuador</DropdownOption>
  </Dropdown>
</Label>

Propiedades del componente