Formulário

NumberField

/componentes/number-field.mdmarkdown cru, para quem lê com agent em vez de olho

Com rótulo

Parcelas

De 1 a 12, sem juros.

Desabilitado

Importar

import { NumberField } from '@rivocode/ui'

Quando usar

Campo de número com mais e menos.

Use quando o valor tem passo e limite conhecidos: quantidade, parcelas, dias de prazo. Para dinheiro, o MaskedInput com molde de moeda diz mais, porque ali o que importa e a pontuacao e não o passo.

O Input cru continua servindo para número solto. A diferença aqui e que seta do teclado, rolagem e os botões respeitam min, max e step, o campo nunca chega num valor que o formulário rejeita depois.

<Field>
  <FieldLabel>Parcelas</FieldLabel>
  <NumberField defaultValue={3} min={1} max={12} />
  <FieldDescription>De 1 a 12, sem juros.</FieldDescription>
</Field>

No React Native

Traduz: o @rivocode/ui-native exporta NumberField - vira stepper (menos, valor, mais), que é o idioma do toque. A API não é a mesma do web (no nativo tudo é controlado), e a tabela de paridade diz o que muda peça a peça.

API

Prop	Tipo
`allowOutOfRange`0.4.0 When true, direct text entry may be outside the `min`/`max` range without clamping, so native range underflow/overflow validation can occur.	`boolean`
`allowWheelScrub`0.4.0 Whether to allow the user to scrub the input value with the mouse wheel while focused and hovering over the input.	`boolean`
`defaultValue`0.4.0 The uncontrolled value of the field when it's initially rendered.	`number`
`disabled`0.4.0 Whether the component should ignore user interaction.	`boolean`
`form`0.4.0 Identifies the form that owns the hidden input.	`string`
`inputRef`0.4.0 A ref to access the hidden input element.	`Ref<HTMLInputElement>`
`largeStep`0.4.0 The large step value of the input element when incrementing while the shift key is held.	`number`
`locale`0.4.0 The locale of the input element.	`LocalesArgument`
`max`0.4.0 The maximum value of the input element.	`number`
`min`0.4.0 The minimum value of the input element.	`number`
`name`0.4.0 Identifies the field when a form is submitted.	`string`
`numberFormat`0.5.0 As opcoes do `Intl.NumberFormat`.	`NumberFormatOptions`
`onValueChange`0.4.0 Callback fired when the number value changes.	`((value: number \| null, eventDetails: NumberFieldRootChangeEventDetails) => void)`
`onValueCommitted`0.4.0 Callback function that is fired when the value is committed.	`((value: number \| null, eventDetails: NumberFieldRootCommitEventDetails) => void)`
`placeholder`0.4.0	`string`
`readOnly`0.4.0 Whether the user should be unable to change the field value.	`boolean`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, NumberFieldRootState>ReactElement<unknown, stringJSXElementConstructor<any>>`
`required`0.4.0 Whether the user must enter a value before submitting a form.	`boolean`
`size`0.4.0	`"lg""md""sm"`
`smallStep`0.4.0 The small step value of the input element when incrementing while the alt key is held.	`number`
`snapOnStep`0.4.0 Whether the value should snap to the nearest step when incrementing or decrementing.	`boolean`
`step`0.4.0 Amount to increment and decrement with the buttons and arrow keys, or to scrub with pointer movement in the scrub area.	`number \| "any"`
`value`0.4.0 The raw numeric value of the field.	`number \| null`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

Quando usar

Campo de número com mais e menos.

<Field>
  <FieldLabel>Parcelas</FieldLabel>
  <NumberField defaultValue={3} min={1} max={12} />
  <FieldDescription>De 1 a 12, sem juros.</FieldDescription>
</Field>

No React Native

API

Prop	Tipo
`allowOutOfRange`0.4.0 When true, direct text entry may be outside the `min`/`max` range without clamping, so native range underflow/overflow validation can occur.	`boolean`
`allowWheelScrub`0.4.0 Whether to allow the user to scrub the input value with the mouse wheel while focused and hovering over the input.	`boolean`
`defaultValue`0.4.0 The uncontrolled value of the field when it's initially rendered.	`number`
`disabled`0.4.0 Whether the component should ignore user interaction.	`boolean`
`form`0.4.0 Identifies the form that owns the hidden input.	`string`
`inputRef`0.4.0 A ref to access the hidden input element.	`Ref<HTMLInputElement>`
`largeStep`0.4.0 The large step value of the input element when incrementing while the shift key is held.	`number`
`locale`0.4.0 The locale of the input element.	`LocalesArgument`
`max`0.4.0 The maximum value of the input element.	`number`
`min`0.4.0 The minimum value of the input element.	`number`
`name`0.4.0 Identifies the field when a form is submitted.	`string`
`numberFormat`0.5.0 As opcoes do `Intl.NumberFormat`.	`NumberFormatOptions`
`onValueChange`0.4.0 Callback fired when the number value changes.	`((value: number \| null, eventDetails: NumberFieldRootChangeEventDetails) => void)`
`onValueCommitted`0.4.0 Callback function that is fired when the value is committed.	`((value: number \| null, eventDetails: NumberFieldRootCommitEventDetails) => void)`
`placeholder`0.4.0	`string`
`readOnly`0.4.0 Whether the user should be unable to change the field value.	`boolean`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, NumberFieldRootState>ReactElement<unknown, stringJSXElementConstructor<any>>`
`required`0.4.0 Whether the user must enter a value before submitting a form.	`boolean`
`size`0.4.0	`"lg""md""sm"`
`smallStep`0.4.0 The small step value of the input element when incrementing while the alt key is held.	`number`
`snapOnStep`0.4.0 Whether the value should snap to the nearest step when incrementing or decrementing.	`boolean`
`step`0.4.0 Amount to increment and decrement with the buttons and arrow keys, or to scrub with pointer movement in the scrub area.	`number \| "any"`
`value`0.4.0 The raw numeric value of the field.	`number \| null`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.