Captcha
import { Captcha } from '@enmovil/ui-design-system';
A text captcha with a randomly generated code, an input for the answer and a reload button. It checks the answer when the input loses focus and reports the result through isValid.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
className | string | No | — | — | Extra CSS class added to the captcha's outer container. |
minLength | number | No | 5 | — | Fewest characters in a generated code. Defaults to 5 and is kept between 5 and 7. |
maxLength | number | No | 7 | — | Most characters in a generated code. Defaults to 7 and is kept between minLength and 7. |
Other attributes
Captcha passes 2 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onChange | ((value: string) => void) | Fires on every edit, with the typed text. |
isValid | ((isValid: boolean) => void) | Fires with the validation result, on blur (when something is typed) and from the imperative validate(). |
onRefresh | (() => void) | Fires when the reload button draws a new captcha. The captcha text is not passed. |
onFocus | FocusEventHandler<HTMLInputElement> | Fires when the input receives focus. |
onBlur | FocusEventHandler<HTMLInputElement> | Fires after the built-in validate-on-blur has run. |
Children
Captcha does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.
Loading playground…
Storybook
Open Captcha in Storybook to try every story with the full set of controls.