Required Indicator

The Required Indicator component is used to indicate that a field is required.

Demo

React

* indicates a required field.

Vue

* indicates a required field.

Example

React

// Import component
import { RequiredIndicator } from '@fintech-sandpit/ui/react';
// Import styles (optional). Please note that RequiredIndicator is sharing the styles with the Field component.
import '@fintech-sandpit/ui/style/components/field.css';

return (
  <p>
    <RequiredIndicator /> indicates a required field.
  </p>
);

Vue

<script setup lang="ts">
// Import component
import { RequiredIndicator } from '@fintech-sandpit/ui/vue';
// Import styles (optional). Please note that RequiredIndicator is sharing the styles with the Field component.
import '@fintech-sandpit/ui/style/components/field.css';
</script>

<template>
  <p>
    <RequiredIndicator /> indicates a required field.
  </p>
</template>

Props

Name	Type	Default	Description
symbol	string	*	The symbol to use for the required indicator

Customisation

React

See the useSetup hook for more information on how to customise the component.

Vue

See the useSetup composition function for more information on how to customise the component.