Radio Group
You can edit 8 Components for free. Get premium for unlimited access.
...
Figma
The Radio Button component is used to select a single menu item in a list.
1. Reference
This component inherits props from the Radio Button.
2. State
You can edit the state with the default, active and disabled parameter.
Image 2.1 : State default
Image 2.2 : State active
Image 2.3 : State disabled
Jetpack Compose
The RadioButton component is used to select a single menu item in a list.
1. Reference
This component inherits props from the Radio Button.
-
-
2. State
You can edit the state with the RadioButtonState.default or RadioButtonState.disabled parameter.
isSelected = isSelected.value,
onClick = {
isSelected.value = !isSelected.value
}
)
RadioButton(
isSelected = isSelected2.value,
onClick = {
isSelected2.value = !isSelected2.value
}
)
RadioButton(
state = RadioButtonState.disabled,
isSelected = isSelected3.value,
onClick = {
isSelected3.value = !isSelected3.value
}
)
Preview
Preview
Code
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarDemo() {
return (
<div className="flex flex-row flex-wrap items-center gap-12">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar className="rounded-lg">
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
<div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
</div>
</div>
)
}Installation
Use this command to install the component in your project.
pnpm dlx shadcn@latest add alertUsage
Add this code example to your project to see how the component works.
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"<Alert variant="default | destructive">
<Terminal />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components and dependencies to your app using the cli.
</AlertDescription>
</Alert>Discover more content
You have questions or need help?
You want to try?
Save time and money?