Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.
Verwendung
Überblick
Eine Optionsfeldgruppe zeigt eine Reihe von sich gegenseitig ausschließenden Optionen an, aus denen eine Person genau eine auswählen kann.
Eine ausführliche Orientierungshilfe zur Verwendung dieser Komponente finden Sie im folgenden Entscheidungsbaum für UI-Komponenten.
Zu verwenden
Bei der Auswahl einer einzelnen Option aus einer kleinen Gruppe von sich gegenseitig ausschließenden Optionen (5 oder weniger).
Nicht zu verwenden
- Wenn mehrere Optionen unabhängig voneinander ausgewählt werden können. Verwenden Sie stattdessen die Kontrollkästchen-Komponente.
- Es gibt eine große Anzahl von Optionen (6 oder mehr), aus denen Benutzer wählen können. Verwenden Sie stattdessen die Komponente Dropdown-Menü.
- Der Benutzer kann keine der Optionen auswählen oder es sich anders überlegen und die Auswahl einer Option aufheben. In solchen Fällen sollten Sie die Kontrollkästchen-Komponente verwenden. Sie können stattdessen auch eine Option des Typs Keine der oben genannten zur Optionsfeldgruppe hinzufügen.
Quellen: Nielsen Norman Group, USWDS
Note: Wenn Sie eine Reihe von sich gegenseitig ausschließenden Optionen anzeigen möchten, aus denen eine Person genau eine auswählen kann, verwenden Sie Optionsfelder anstelle von Kontrollkästchen.
Aufbau
- Beschriftung der Optionsfeldgruppe: Erläutert den Zweck der Optionsfeldgruppe.
- Hilfstext (optional): Liefert zusätzlichen Kontext für die Optionsfeldgruppe.
- Optionsfeldeingabe: Zeigt den entsprechenden Status an. Standardmäßig ist eine Option ausgewählt.
- Optionsfeldbeschriftung: Beschreibt die Informationen, die ausgewählt oder deaktiviert werden sollen.
- QuickInfo-Symbol (optional): Dient zur Erläuterung des Kontexts für ein bestimmtes Optionsfeld. Wenn Sie mit dem Mauszeiger darauf zeigen, wird die QuickInfo angezeigt.
Ausrichtung und Positionierung
Eine Optionsfeldgruppe kann abhängig von der Seitenstruktur vertikal oder horizontal angeordnet werden. Standardmäßig sind Optionsfelder vertikal angeordnet, um das Lesen zu erleichtern.
Wie bei allen Eingabekomponenten kann die Beschriftung der Optionsfeldgruppe oben (Standard) oder links von der Eingabe selbst erscheinen.
Standardauswahl
Konfigurieren Sie eine der Optionsschaltflächen, in der Regel die erste, so, dass sie standardmäßig ausgewählt ist. Diese Auswahl beschleunigt die Arbeit, indem sie dem Benutzer mitteilt, dass er eine Option aus dieser Gruppe auswählen muss. Für die meisten Anwendungsfälle wird das Bereitstellen einer Standardauswahl empfohlen.
Manchmal ist es jedoch verfehlt, einen Standardwert vorzubelegen, da dies zu falschen Eingaben führen kann. Berücksichtigen Sie den Inhalt und die Standardauswahl, wie Benutzer darauf reagieren und welche Auswirkungen die Auswahl kurz- und langfristig auf den Benutzer und die Organisation haben wird. Vermeiden Sie Standardauswahlen, die anmaßend, aufdringlich, beleidigend oder befremdlich wirken.
Quelle: Nielsen Norman Group
Verwenden Sie eine logische Reihenfolge, um den Benutzern das Auffinden der gesuchten Option zu erleichtern. Beispiel:
- von der häufigsten zu der am wenigsten häufigen Option
- von der am wenigsten riskanten zur riskantesten Option
- von der einfachsten zur komplexesten Option
Vermeiden Sie es, die Auswahloptionen in alphabetischer Reihenfolge anzuordnen. Eine solche Reihenfolge ist sprachenabhängig und lässt sich nicht gut lokalisieren.
Inhalt
Allgemeine Richtlinien fürs Schreiben
- Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
- Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
- Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
- Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
- Halten Sie Wörter und Sätze kurz.
Verwendung sich gegenseitig ausschließender Optionen
Optionsfelder und Kontrollkästchen sind nicht austauschbar. Verwenden Sie Optionsfelder, um eine einzelne Option aus einer kleinen Gruppe von sich gegenseitig ausschließenden Optionen (5 oder weniger) auszuwählen. Verwenden Sie Kontrollkästchen, wenn Listen mit Optionen vorhanden sind und der Benutzer eine beliebige Anzahl von Optionen (oder gar keine) auswählen kann.
Verwenden Sie Optionsfelder, wenn nur ein Element ausgewählt werden kann.
Verwenden Sie keine Optionsfelder, wenn mehrere Elemente ausgewählt werden können.
Optionsfeldgruppen müssen eine Beschriftung aufweisen, die beschreibt, wofür die Liste der Optionen steht. Eine Optionsfeldgruppe ohne Beschriftung ist uneindeutig und nicht barrierefrei.
Verwenden Sie die Gruppenbeschriftung, um die Kategorie der Gruppe anzugeben oder zu beschreiben, welche Aktionen im Folgenden auszuführen sind.
Fügen Sie eine Beschriftung hinzu, die eindeutig beschreibt, wofür die Liste der Optionen steht.
Gehen Sie nicht davon aus, dass die Optionen ohne Beschriftung selbsterklärend sind.
Beschränken Sie die Textbeschriftung des Optionsfelds auf eine einzelne Zeile. Es wird empfohlen, ein bis drei Wörter für Optionsfeldbeschriftungen zu verwenden.
Kürzen Sie den Text der Beschriftung von Optionsfeldern nicht mit Auslassungspunkten (...) ab. Wenn die Beschriftung zu lang für den verfügbaren horizontalen Platz ist, sollten Sie eine andere Formulierung wählen. Sie können auch lange Optionsfeldbeschriftungen in eine zweite Zeile umbrechen. Dies ist besser als kürzen.
Wählen Sie einen prägnanten Beschriftungstext für das Optionsfeld. Gegebenenfalls kann er in eine zweite Zeile umbrochen werden.
Kürzen Sie den Text der Beschriftung von Optionsfeldern nicht mit Auslassungspunkten (...) ab.
Anbieten eindeutiger, umfassender Optionen
Benutzer können nur eine Auswahl aus einer Optionsfeldgruppe treffen. Das bedeutet, dass jede Entscheidung klar und deutlich sein muss. Vermeiden Sie sich überschneidende Optionen.
Stellen Sie sicher, dass die Optionen klar voneinander unterscheidbar sind.
Bieten Sie keine Optionen an, die sich überschneidende Werte enthalten.
Stellen Sie sicher, dass die von Ihnen angebotenen Optionen umfassend sind, damit die Benutzer eine Auswahl treffen können. Wenn keine umfassende Auswahl möglich ist, bieten Sie eine Schaltfläche mit der Bezeichnung Sonstiges an, die durch ein Eingabefeld ergänzt wird.
Quelle: Nielsen Norman Group
Stellen Sie sicher, dass die Optionen umfassend sind.
Stellen Sie keinen unvollständigen Satz von Optionen bereit.
Benutzen Sie Fehlertext zur Anleitung der Benutzer
Optionsfeldgruppen können Fehlermeldungen enthalten, um anzuzeigen, dass eine Auswahl erforderlich ist, um fortzufahren, oder dass die getroffene Auswahl ungültig war.
Verwenden Sie für Fehlertext die übliche Groß- und Kleinschreibung. Schreiben Sie 1 bis 2 kurze, vollständige Sätze, die mit einem Punkt enden.
Verwenden Sie Fehlermeldungstexte, um den Benutzer anzuleiten und ihm eine Lösung aufzuzeigen.
Schreiben Sie keine zweideutigen Fehlermeldungen und lassen Sie die Benutzer nicht im Unklaren darüber, wie ein Problem zu lösen ist.
Pflichtfelder markieren
Markieren Sie erforderliche Felder mit einem Sternchen (*). Das Sternchen steht vor der Feldbeschriftung. Benutzer können so leicht herausfinden, welche Felder erforderlich sind, indem sie nur das Zeichen ganz links in der Beschriftung prüfen.
Zusätzlich zur Markierung erforderlicher Felder mit einem Sternchen wird empfohlen, klare Anweisungen am oberen Rand des Formulars einzufügen, z. B. „Alle mit einem Sternchen gekennzeichneten Felder sind Pflichtfelder“, um sicherzustellen, dass die Benutzer die Bedeutung des Sternchens verstehen.
Sie können ein Sternchen nur zur Optionsfeldgruppe und nicht zu einzelnen Optionen hinzufügen.
Verwenden Sie ein Sternchen, um anzuzeigen, dass ein Feld ein Pflichtfeld ist.
Verwenden Sie kein Sternchen, um optionale Elemente zu kennzeichnen.
Groß- und Kleinschreibung verwenden
Gruppen- und Optionsfeldbeschriftungen werden in der üblichen Groß- und Kleinschreibung angezeigt.
Weitere Informationen zum Implementieren der Groß- und Kleinschreibung finden Sie im UI Text Style Guide.
Verwenden Sie die übliche Groß- und Kleinschreibung.
Schreiben Sie nicht alles groß.
Verhalten
Zustände
Die Optionsfeldkomponente verfügt über 2 Hauptzustände: ausgewählt und nicht ausgewählt. In der Standardansicht einer Optionsfeldgruppe ist eines der Optionsfelder vorausgewählt.
Die Benutzer können jeweils nur ein Optionsfeld auswählen. Wenn ein Benutzer eine neue Auswahl trifft, wird die vorherige Auswahl automatisch aufgehoben.
| Ausgewählter Zustand | Nicht ausgewählter Zustand |
|---|
 |  |
Optionsfelder haben auch die Zustände Aktiviert, Schwebend, Fokussiert, Aktiv, Deaktiviert und Fehler.
| Visualisierung | Zustand | Beschreibung |
|---|
 | Aktiviert | Zeigt dem Benutzer an, dass das Element für die Interaktion aktiviert ist (Standard). |
 | Schwebend | Zeigt an, dass der Benutzer den Mauszeiger auf dem Element positioniert hat (nur Desktop). |
 | Fokussiert | Zeigt an, dass der Benutzer das Element hervorgehoben hat, in der Regel über eine Eingabemethode wie Tastatur oder Sprachbefehl. |
 | Aktiv | Gibt an, dass der Benutzer auf das Element klickt oder tippt. |
 | Deaktiviert | Teilt dem Benutzer mit, dass das Element derzeit nicht interaktiv ist. |
 | Fehler | Gibt an, dass ein Fehler im Zusammenhang mit diesem Element aufgetreten ist. Beispielsweise muss eine Auswahl getroffen werden, um weiterzumachen, ansonsten ist eine Auswahl ungültig. |
Interaktionen
Maus
Um Optionsfelder an- oder abzuwählen, klicken die Benutzer entweder auf das Optionsfeld oder auf die Beschriftung.
Tastatur
Die Benutzer navigieren mithilfe der Pfeiltasten zwischen Optionsfeldern. Um ein Optionsfeld auszuwählen, drücken die Benutzer die EINGABETASTE oder die LEERTASTE.
Screenreader
Die Optionsfeldgruppe implementiert das HTML-Element <input type="radio">, ergänzt durch WAI-ARIA, um auch für blinde und sehbehinderte Nutzende eine verständliche Bedeutung bereitzustellen. Die Gruppe wird als solche mit role='radiogroup' bezeichnet, während aria-checked je nach Zustand des Optionsfelds zwischen 'true' und 'false' umgeschaltet wird. Beschriftungen und Optionsfelder werden programmgesteuert über eine 'for/id'-Zuordnung zugeordnet. Der Standardwert aria-required wechselt von 'false' zu 'true', wenn das erforderliche Kontrollkästchen in Storybook markiert ist.
Barrierefreiheit
Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:
- Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
- Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
- Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
- Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.
Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.
Stellen Sie bei Verwendung dieser Komponente in Ihrer Anwendung Folgendes sicher:
- Wenn für eine Optionsfeldgruppe keine Standardauswahl getroffen wurde, ist das erste Optionsfeld in der Gruppe markiert.
- Beschriftungen werden nach der Optionsschaltfläche angezeigt.
Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.
Code
<RadioGroup label="This is a group">
<Radio
label="option 1"
value="1"
/>
<Radio
label="option 2"
value="2"
/>
</RadioGroup>
Importanweisung
import { Radio, RadioGroup } from '@jutro/components';
Komponentenvertrag
Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.
Eigenschaften
Optionsgruppen-Eigenschaften
labelerforderlich
BeschreibungLabel associated with radio group, also passed as a default value to aria-label.
children
BeschreibungList of Radio components to be grouped together.
className
BeschreibungCSS class name for this component.
disabled
BeschreibungIf set to true, component is rendered in disabled state. Note that when radio group is disabled, all radio options inside group are disabled as well.
displayOnly
BeschreibungIf set to true, displays the component value in plain text.
hideLabel
BeschreibungIf set to true, the label is not visible.
horizontal
BeschreibungIf set to true, radio options inside group are rendered horizontally.
initialValue
BeschreibungInitially selected radio. If value prop is specified along with this prop, this prop's value is discarded.
labelPosition
BeschreibungPosition of radio group label, relative to radio options. 'top' - label will be placed above the option. 'left' - label will be placed on the left side of the options.
onChange
Typfunction (React.ChangeEvent<HTMLInputElement>, string)
BeschreibungCallback invoked when component value is changed.
required
BeschreibungIf set to true, component is rendered as required and label has asterisk.
secondaryLabel
BeschreibungAdditional label associated with radio group.
stateMessages
BeschreibungAn object with a list of error messages for the current state.
Typ{ text: intlMessageShape, trigger: string } | intlMessageShapetext
BeschreibungText to show tooltip content.
trigger
BeschreibungThe trigger to show the tooltip.
BeschreibungText to be displayed in the tooltip or tooltip object that includes: text - to show tooltip content, trigger - to set tooltip trigger.
value
BeschreibungValue of the component. Takes precedence over initialValue. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
Optionseigenschaften
labelerforderlich
BeschreibungLabel associated with radio field, also passed as a default value to aria-label.
valueerforderlich
className
BeschreibungCSS class name for this component.
disabled
BeschreibungIf set to true, radio input is rendered in disabled state. Note that when radio group is disabled all radios inside group are disabled as well.
secondaryLabel
BeschreibungAdditional label that is associated with the radio field.
Typ{ text: intlMessageShape, trigger: string } | intlMessageShapetext
BeschreibungText to show tooltip content.
trigger
BeschreibungThe trigger to show the tooltip.
BeschreibungText to be displayed in the tooltip or tooltip object that includes: text - to show tooltip content, trigger - to set tooltip trigger.
Hooks
Es sind keine Hooks verfügbar für Radio oder RadioGroup.
Übersetzungsschlüssel
Es gibt keine Übersetzungen für Radio oder RadioGroup.
Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.
Escape Hatches
Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.
Folgende Optionen sind verfügbar:
- Design-Token
- Eine
className-Eigenschaft
- Möglichkeit zum Übergeben von nativen HTML-Attributen
- Ref mit imperativen Handlern
- Eine native
event-Eigenschaft
Übergeben von HTML-Eigenschaften an die Komponente
Sie können HTML-Eingabeattribute verwenden, mit Ausnahme derjenigen, die von Jutro überschrieben werden. Diese Attribute werden dem HTML-Element input zugewiesen.
<RadioGroup label="This is a group">
<Radio
label="This is the first one"
value="1"
id="firstOption"
/>
<Radio
label="This is the second one"
value="2"
id="secondOption"
/>
<Radio
label="This is the third one"
value="3"
id="thirdOption"
/>
</RadioGroup>
Durch die Übergabe der id-Eigenschaft wird sie Teil des HTML input-Elements, das im HTML-DOM erstellt wird.
Ref mit imperativen Handlern
Die Jutro-Eingaben haben imperative Handler als Mechanismus implementiert, um Zugang zu einigen gängigen nativen Funktionen zu bieten, die für Sie nützlich sein könnten. Die folgenden Funktionen sind verfügbar:
-
Fokus setzen ermöglicht es, den Fokus des Benutzers auf eine bestimmte Komponente zu setzen.
-
Fokus aufheben ermöglicht es, den Fokus von der Komponente zu entfernen.
-
Zur Komponente scrollen ermöglicht es, den Benutzer zu einem bestimmten Bereich der Seite zu führen.
Diese Funktionen werden über die ref-Eigenschaft bereitgestellt, die sie wie folgt verfügbar macht:
const componentRef = useRef(null);
const setFocus = () => {
componentRef?.current.focus();
}
const removeFocus = () => {
componentRef?.current.blur();
}
const scrollToComponent = () => {
componentRef?.current.scrollIntoView();
}
<Component ref={componentRef}>
In Zukunft könnten weitere Optionen hinzukommen.
Benutzerdefinierte Verhalten
Verwendung der Optionsfeld-Komponente
Die Radio-Komponente darf nicht eigenständig verwendet werden. Sie darf nur im Rahmen der RadioGroup-Komponente verwendet werden. Die RadioGroup-Komponente akzeptiert nur Radio-Elemente als untergeordnete Elemente.
Warning: Jede andere Verwendung als die oben beschriebene wird nicht unterstützt und könnte in zukünftigen Releases zu unerwarteten Problemen führen.
Vorrang der Eigenschaften disabled, displayOnly und readOnly
Wenn zwei oder mehr der Eigenschaften disabled, displayOnly, und readOnly gleichzeitig auf true gesetzt werden, gilt die folgende Vorrangregel:
displayOnly > readOnly > disabled
Obwohl einige Jutro-Komponenten ergänzende Funktionen oder eine Hilfsfunktion zur Erleichterung des Validierungsprozesses bereitstellen, liegt es in Ihrer Verantwortung als Entwickler, die Validierung von Benutzereingaben (mit oder ohne Verwendung der ergänzenden Hilfsfunktionen) durchzuführen und zu entscheiden, welche Fehlermeldungen angezeigt werden sollen.
Das Verhalten von Jutro-Komponenten hängt von der Implementierung durch den Entwickler ab.
Wann werden Fehlermeldungen angezeigt?
Fehlermeldungen werden nur angezeigt, wenn Sie sie über die Eigenschaft stateMessages an die Komponente übergeben. Diese Eigenschaft empfängt ein Objekt mit dem folgenden Inhalt:
{
error: ['error message 1', 'error message 2', 'error message N'];
}
Die Komponente zeigt alle bereitgestellten Fehlermeldungen in der gleichen Reihenfolge wie im Array an.
Wann erfolgt die Validierung?
Dies ist Ihre Entscheidung als Entwickler. Da die Komponenten nicht festlegen, wann die Validierung durchgeführt wird oder wann der Fehler angezeigt werden muss, müssen Sie die Logik für die Behandlung entsprechend den Projektanforderungen implementieren, z. B. während der Benutzer den Inhalt bearbeitet, wenn die Komponente den Fokus verliert und bei der Formularübermittlung.
Verwenden Sie die alten RadioButtonField-, RadioButtonCardField-, ImageRadioButtonField-, RadioField- oder RadioGroup-Komponenten?
- Um die entsprechende Dokumentation für die alten Komponenten anzuzeigen, wechseln Sie zu einer Version der Dokumentation, die älter als 10.0 ist.
- Die folgenden älteren Komponenten sind auch in Storybook verfügbar:
Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.
Beispiele
Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie die Komponenten RadioGroup und Radio verwenden können.
Einfache Optionsfeldgruppe
Radio kann nicht allein oder außerhalb des Kontexts von RadioGroup verwendet werden. RadioGroup sollte nur Radio-Komponenten als untergeordnete Elemente erhalten. Die label-Eigenschaft ist in beiden Komponenten obligatorisch und die value-Eigenschaft ist nur für die Radio-Komponente erforderlich.
<RadioGroup label="This is a group">
<Radio
label="option 1"
value="1"
/>
<Radio
label="option 2"
value="2"
/>
</RadioGroup>
Deaktiviertes Optionsfeld vs. deaktivierte Optionsfeldgruppe
Beide Komponenten stellen eine disabled-Eigenschaft bereit. Wenn sie jedoch auf der RadioGroup-Ebene auf den Wert truefestgelegt ist, überschreibt sie alle deaktiviert-Konfigurationen auf Radio-Ebene. Wenn eine disabled={false}-Eigenschaft unter den Radio-Optionen existiert und auf der RadioGroup-Ebene disabled={true} festgelegt ist, sind alle Optionen deaktiviert.
<RadioGroup
label="This is a group"
disabled={true}>
<Radio
label="option 1"
value="1"
disabled={false}
/>
<Radio
label="option 2"
value="2"
disabled={false}
/>
</RadioGroup>
Vordefinierte Option
Sie können festlegen, welche Option anfänglich ausgewählt wird, indem Sie die value-Eigenschaft an die initialValue-Eigenschaft von RadioGroup übergeben.
<RadioGroup
label="This is a group with second option selected initially"
initialValue="2">
<Radio
label="option 1"
value="1"
/>
<Radio
label="option 2 is initially selected"
value="2"
/>
</RadioGroup>
Horizontale Gruppe
Die RadioGroup-Komponente ermöglicht die Anzeige von Optionen in horizontaler Verteilung, indem Sie die horizontal-Eigenschaft auf true setzen.
<RadioGroup
label="This is a group"
horizontal={true}>
<Radio
label="option 1"
value="1"
disabled={false}
/>
<Radio
label="option 2"
value="2"
disabled={false}
/>
</RadioGroup>
Validierungen von Optionsgruppen
Die RadioGroup-Komponente stellt keine spezielle Validierungslogik zur Verfügung, bietet aber die Möglichkeit, die Validierung durch den Entwickler einzubeziehen und die stateMessages-Eigenschaft zur Anzeige der erforderlichen Fehlermeldung zu verwenden.
Dies ist ein Beispiel für die Handhabung der Validierung, wenn das onChange-Ereignis ausgelöst wird.
export function RadioValidation() {
const [groupValidationMessages, setGroupValidationMessages] = useState({});
const onChange = useCallback((e, newValue) => {
setGroupValidationMessages({});
if (newValue == '1') {
setGroupValidationMessages({
error: ['Only second option can be marked'],
});
}
}, []);
return (
<RadioGroup
label="Do not select the forbidden option"
onChange={onChange}
stateMessages={groupValidationMessages}>
<Radio
label="Do not select the forbidden option"
value="1"
/>
<Radio
label="This option can be selected"
value="2"
/>
</RadioGroup>
);
}
RadioGroup weist eine value-Eigenschaft auf, die für das Szenario der kontrollierten Komponenten verwendet werden kann:
export function RadioControlled() {
const [updatedValue, setNewValue] = useState('first given value');
const onChange = (e, newValue) => {
setNewValue(newValue.value);
};
return (
<div>
<Select
label="Choose a value to be assigned"
secondaryLabel="This value will be the option chosen below"
onChange={onChange}>
<SelectOption
value={{
id: '1',
label: 'Option 1',
value: '1',
}}
/>
<SelectOption
value={{
id: '2',
label: 'Option 2',
value: '2',
}}
/>
</Select>
<br />
<RadioGroup
label="Changes with the above"
value={updatedValue}>
<Radio
label="Option 1"
value="1"
disabled={true}
/>
<Radio
label="Option 2"
value="2"
disabled={true}
/>
</RadioGroup>
</div>
);
}
Verwendung von ref zur Festlegung des Fokus
RadioGroup und bestimmte andere Eingaben ermöglichen es Ihnen, über eine ref-Eigenschaft auf einige native Verhaltensweisen zuzugreifen. Es werden jedoch nur einige Funktionen verfügbar gemacht. In diesem Fall wird beim Klicken auf die Schaltfläche automatisch der Fokus auf die darunter liegende Eingabe gesetzt.
<RadioGroup
label="This is a group with second option selected initially"
initialValue="2">
<Radio
label="option 1"
value="1"
/>
<Radio
label="option 2 is initially selected"
value="2"
/>
</RadioGroup>
Hinzufügen von Kontext
Sie können Kontextinformationen zu den Komponenten RadioGroup und Radio hinzufügen, indem Sie deren benutzerdefinierte Eigenschaften verwenden.
Die Eigenschaft secondaryLabel unterstützt ein intlMessageShape-Objekt, um zusätzlichen Kontext unter der Hauptbeschriftung anzuzeigen.
Die Eigenschaft tooltip unterstützt entweder ein intlMessageShape-Objekt oder ein benutzerdefiniertes Objekt. Sie können sie verwenden, um eine QuickInfo mit zusätzlichen Informationen anzuzeigen. Sie können das Verhalten der QuickInfo mit dem benutzerdefinierten Objekt ändern.
Richtlinien zum Schreiben von QuickInfos finden Sie in der Dokumentation zur QuickInfo-Komponente.
<RadioGroup
label="This is a group"
tooltip="Select one of the available options"
secondaryLabel="This label provides additional context.">
<Radio
tooltip="By selecting this option, you enable feature X."
label="Option 1"
value="1"
/>
<Radio
tooltip={{ text: "By selecting this option, you enable feature Y.", trigger: "pointerover" }}
label="Option 2"
value="2"
secondaryLabel="This label provides additional context."
/>
</RadioGroup>
Änderungsprotokoll
10.12.0
Die Eigenschaft secondaryLabel wurde der Komponente Radio hinzugefügt. Mit dieser Eigenschaft können Sie eine zusätzliche Beschriftung hinzufügen, die mit dem Optionsfeld verknüpft ist.
10.6.0
Die nicht verwendete readOnly-Eigenschaft wurde aus den Komponenten RadioGroup und Radio entfernt. Diese Eigenschaft hatte keine Funktion und wurde versehentlich exponiert.
10.0.0
Neue Komponenten @jutro/components/RadioGroup und @jutro/components/Radio eingeführt. Diese Komponenten ersetzen andere bestehende, auf die Radio-Schaltfläche bezogene Komponenten RadioButtonField, RadioButtonCardField, ImageRadioButtonField, RadioField und RadioGroup.
Die früheren auf Radio bezogenen Komponenten wurden abgekündigt und in das @jutro/legacy-Paket verschoben. Um die entsprechende Dokumentation anzuzeigen, wechseln Sie zu einer älteren Version der Dokumentation.
Ursprüngliche Speicherorte der Komponenten:
RadioButtonField: @jutro/components/RadioButtonFieldRadioButtonCardField: @jutro/components/RadioButtonCardFieldImageRadioButtonField: @jutro/components/ImageRadioButtonFieldRadioField: @jutro/components/RadioFieldRadioGroup: @jutro/components/RadioGroup
Aktualisierte Speicherorte der Komponenten:
RadioButtonField: @jutro/legacy/components/RadioButtonFieldRadioButtonCardField: @jutro/legacy/components/RadioButtonCardFieldImageRadioButtonField: @jutro/legacy/components/ImageRadioButtonFieldRadioField: @jutro/legacy/components/RadioFieldRadioGroup: @jutro/legacy/components/RadioGroup
Es gibt Codemods, mit denen Sie vorhandene Importe automatisch umbenennen können.
Note: Nicht alle Funktionen und Verhaltensweisen, die in den „älteren“ Komponenten enthalten sind, wurden in die neue RadioGroup-Komponente übernommen.
