diff --git a/.changeset/stupid-suns-cheat.md b/.changeset/stupid-suns-cheat.md
new file mode 100644
index 00000000000..3f936571554
--- /dev/null
+++ b/.changeset/stupid-suns-cheat.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+FormControl: Adds new props to `FormControl.Label`, `requiredText` and `requiredIndicator`
diff --git a/packages/react/src/FormControl/FormControl.docs.json b/packages/react/src/FormControl/FormControl.docs.json
index a4c737b98b6..94dcd39ad7c 100644
--- a/packages/react/src/FormControl/FormControl.docs.json
+++ b/packages/react/src/FormControl/FormControl.docs.json
@@ -56,6 +56,18 @@
"defaultValue": "'label'",
"description": "The label element can be changed to a 'legend' when it's being used to label a fieldset, or a 'span' when it's being used to label an element that is not a form input. For example: when using a FormControl to render a labeled SegementedControl, the label should be a 'span'"
},
+ {
+ "name": "requiredText",
+ "type": "string",
+ "defaultValue": "'*'",
+ "description": "The text to display when the field is required"
+ },
+ {
+ "name": "requiredIndicator",
+ "type": "boolean",
+ "defaultValue": "true",
+ "description": "Whether to show or hide the required text in the accessibility tree, the required text is still shown visually."
+ },
{
"name": "sx",
"type": "SystemStyleObject"
diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx
index 07bb3fecb8d..b8184d635e6 100644
--- a/packages/react/src/FormControl/FormControl.features.stories.tsx
+++ b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -10,6 +10,7 @@ import {
Radio,
RadioGroup,
Select,
+ Text,
TextInput,
TextInputWithTokens,
Textarea,
@@ -306,3 +307,30 @@ export const DisabledInputs = () => (
)
+
+export const CustomRequired = () => (
+
+
+ Form Input Label
+ This is a form field with a custom required indicator
+
+
+
+ Required fields are marked with an asterisk (*)
+
+ Form Input Label
+
+ This is a form field with a required indicator that is hidden in the accessibility tree
+
+
+
+
+
+
+ Form Input Label
+
+ This is a form field that is marked as optional, it is not required
+
+
+
+)
diff --git a/packages/react/src/FormControl/_FormControlLabel.tsx b/packages/react/src/FormControl/_FormControlLabel.tsx
index 62c346d8ff8..8c52c909c52 100644
--- a/packages/react/src/FormControl/_FormControlLabel.tsx
+++ b/packages/react/src/FormControl/_FormControlLabel.tsx
@@ -8,12 +8,14 @@ export type Props = {
* Whether the label should be visually hidden
*/
visuallyHidden?: boolean
+ requiredText?: string
+ requiredIndicator?: boolean
id?: string
} & SxProp
const FormControlLabel: React.FC<
React.PropsWithChildren<{htmlFor?: string} & React.ComponentProps & Props>
-> = ({as, children, htmlFor, id, visuallyHidden, sx, ...props}) => {
+> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, sx, ...props}) => {
const {disabled, id: formControlId, required} = useFormControlContext()
/**
@@ -26,6 +28,8 @@ const FormControlLabel: React.FC<
id,
visuallyHidden,
required,
+ requiredText,
+ requiredIndicator,
disabled,
sx,
...props,
@@ -36,6 +40,8 @@ const FormControlLabel: React.FC<
visuallyHidden,
htmlFor: htmlFor || formControlId,
required,
+ requiredText,
+ requiredIndicator,
disabled,
sx,
...props,
diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx
index 68ac9e129c6..e932a4d5418 100644
--- a/packages/react/src/internal/components/InputLabel.tsx
+++ b/packages/react/src/internal/components/InputLabel.tsx
@@ -6,6 +6,8 @@ import VisuallyHidden from '../../_VisuallyHidden'
type BaseProps = SxProp & {
disabled?: boolean
required?: boolean
+ requiredText?: string
+ requiredIndicator?: boolean
visuallyHidden?: boolean
id?: string
}
@@ -28,6 +30,8 @@ const InputLabel: React.FC> = ({
htmlFor,
id,
required,
+ requiredText,
+ requiredIndicator,
visuallyHidden,
sx,
as = 'label',
@@ -52,10 +56,10 @@ const InputLabel: React.FC> = ({
}}
{...props}
>
- {required ? (
+ {required || requiredText ? (
{children}
- *
+ {requiredText ?? '*'}
) : (
children